SVG font-size-adjust Attribute

The font-size-adjust attribute allows you to set the aspect value for an element that will set the x-height of the first choice font in the given substitute font. This attribute adjusts the font size x-height according to the font-family.

Syntax:

font-size-adjust="size"

Attribute Values:

decimal: Decimal at which we want to adjust the size.

We will use the font-size-adjust attribute for adjusting the size of the font.

Example 1:

HTML

<!DOCTYPE html> 
<html>
<body> 
    <svg width="600" height="80" viewBox="0 0 500 80"
    xmlns="http://www.w3.org/2000/svg">
        <text y="50" x="20" font-family="Times, serif"
              font-size="20px" font-size-adjust="0.50">
            this is an example of smaller text
        </text>
    </svg>
</body> 
</html>

Output:

Example 2:

HTML

<!DOCTYPE html> 
<html> 

<body> 
    <svg width="700" height="500" viewBox="0 0 500 800"
         xmlns="http://www.w3.org/2000/svg">
        <text y="50" x="20" font-family="Times, serif" 
              font-size="60px" font-size-adjust="0.50">
            this is an example of larger text
        </text>
    </svg>
</body> 
</html>

Output:

SVG font-size-adjust Attribute

Explore