Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

SVG font-size Attribute

  • Last Updated : 15 Oct, 2020

The font-size attribute refers to the size of the font from baseline when multiple lines of text are set solid in a multiline layout environment.

Syntax:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

font-size="size"

Attribute Values:

  • length: Length at which we want to set the size.
  • percentage: Percentage at which we want to set the size.

We will use the font size attribute for setting the size of font.



Example 1 




<!DOCTYPE html>
<html>
  
<body>
    <svg viewBox="0 0 600 100" 
        xmlns="http://www.w3.org/2000/svg">
          
        <text x="10" y="50" 
            font-size="smaller">
            smaller
        </text>
          
        <text x="10" y="30" 
            font-size="2em">
            larger
        </text>
    </svg>
</body>
  
</html>

Output:

Example 2: 




<!DOCTYPE html>
<html>
  
<body>
    <svg viewBox="0 0 600 100" 
        xmlns="http://www.w3.org/2000/svg">
          
        <text x="10" y="50" 
            font-size="60%">
            smaller
        </text>
          
        <text x="10" y="30" 
            font-size="240%">
            larger
        </text>
    </svg>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :