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
HTML
<!DOCTYPE html> <html> <body> <h1 style="color:green; font-size:50px; text-align:center;"> GeeksforGeeks </h1> <svg viewBox="0 0 140 40" <text y="15" text-rendering ="geometricPrecision"> Geometric precis </text> </svg> </body> </html> |
chevron_right
filter_none
Output:
Example 2: Below is the example that illustrated the use of the text-rendering attribute
HTML
<!DOCTYPE html> <html> <body> <h1 style="color: green; font-size: 50px; text-align: center;"> GeeksforGeeks </h1> <svg viewBox="0 0 140 40" <text y="15" text-rendering ="optimizeLegibility"> Optimized legibility </text> </svg> </body> </html> |
chevron_right
filter_none
Output:
