SVG text-rendering Attribute

The text-rendering attribute gives hint about what contracts should be made while rendering text. It has an effect only on the text element.

Syntax:

text-renderring = auto | optimizeLegibility |
 geometricPrecision | optimizeSpeed

Attribute Values: The text-rendering attribute accepts the values mentioned above and described below:

• auto: It shows that the user agent shall make appropriate contracts to balance geometric precision, legibility, and speed.
• optimizeSpeed: It shows that the user agent shall focus on rendering speed over geometric precision and legibility.
• optimizeLegibility: It tells that the user agent must focus on legibility over geometric precision and rendering speed.
• geometricPrecision: It shows that the user agent shall focus on geometric precision over rendering speed and legibility.

Example 1: Below is the example that illustrated the use of the text-rendering attribute

Output:

👁 Image

Example 2: Below is the example that illustrated the use of the text-rendering attribute

Output:

👁 Image