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: