SVG text-rendering Attribute
Last Updated :
31 Mar, 2022
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 >
|
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 >
|
Output:
Share your thoughts in the comments
Please Login to comment...