Skip to content
Related Articles

Related Articles

SVG letter-spacing Attribute
  • Last Updated : 14 Dec, 2020

The letter-spacing attribute controls spacing between text characters i.e. increasing or decreasing the space between characters in a text.

Syntax:

letter-spacing = keyword-values | length-values | global-values

Attribute Values: The letter-spacing attribute accepts three values mentioned above and described below:

  • keyword-values: This attribute value includes values like normal.
  • length-values: This attribute value includes values like em, px, etc.
  • global-values: This attribute value includes values like inherit, initial, and unset.

Note: The default value of letter-spacing is normal

Below examples illustrate the use of letter-spacing attribute in SVG.



Example 1:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color: green; 
              margin-left: 150px;
              font-size: 25px;">
        GeeksforGeeks
    </h1>
  
    <svg viewBox="0 5 700 30" 
        xmlns="http://www.w3.org/2000/svg">
          
        <text y="20" letter-spacing="2">
            It is a Computer Science portal.
        </text>
    </svg>
</body>
  
</html>

chevron_right


Output:

Example 2:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color: green; 
            margin-left: -5px;
            font-size: 25px;">
        GeeksforGeeks
    </h1>
  
    <svg viewBox="0 0 700 30" 
        xmlns="http://www.w3.org/2000/svg">
          
        <text y="20" letter-spacing="-1">
            It is a Computer Science portal.
        </text>
    </svg>
</body>
  
</html>

chevron_right


Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :