Open In App

SVG font-variant Attribute

Improve
Improve
Like Article
Like
Save
Share
Report

The font-variant attribute indicates the variant in which the text or font is to be rendered.

Syntax:

font-variant = "variant"

Attribute Values:

  • default value: Normal value is the default value.
  • animatable value: Animation value is the animatable value.
  • other values: small-caps value is an example of other values.

We will use the font-variant attribute for setting the variation of the font.

Example 1: 

HTML




<!DOCTYPE html>
<html>
  
<body>
    <svg viewBox="0 0 250 30" 
        xmlns="http://www.w3.org/2000/svg">
          
        <text y="20" font-variant="Normal">
            GeeksforGeeks
        </text>
    </svg>
</body>
  
</html>


Output:

Example 2: 

HTML




<!DOCTYPE html>
<html>
  
<body>
    <svg viewBox="0 0 250 30" 
        xmlns="http://www.w3.org/2000/svg">
          
        <text x="10" y="20" font-variant="small-caps">
            GeeksforGeeks
        </text>
    </svg>
</body>
  
</html>


Output:



Last Updated : 31 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads