Open In App

SVG word-spacing Attribute

Improve
Improve
Like Article
Like
Save
Share
Report

The word-spacing attribute in SVG is used to indicate the spacing between words. This spacing can be changed by using the length value of the attribute. 

When the length is mentioned without a unit identifier, the browser processes it as a width value in the current user coordinate system, otherwise, if it is mentioned with one of the unit identifiers, then the browser converts it into a corresponding value in the current user coordinate system.

Note: This attribute can be applied to any element but it has effect only on the <altGlyph>, <text>, <textPath>, <tref>, and <tspan> elements.

Syntax:

word-spacing ="length"

Attribute Value: This attribute accepts a single value as mentioned above and described below:

  • length: It is a number that specifies the space between the words. It can be followed by one of the units of length like px, cm, mm, pt, etc.

Below examples illustrate the use of the word-spacing attribute:

Example 1:

HTML




<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color:green; font-size:50px; 
               text-align:center;">
        GeeksforGeeks
    </h1>
  
    <svg viewBox="0 0 450 150" 
        xmlns="http://www.w3.org/2000/svg">
          
        <text y="15" word-spacing="10">
            GeeksforGeeks is a Computer 
            Science portal
        </text>
    </svg>
</body>
  
</html>


Output:

Example 2:

HTML




<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color:green; font-size:50px; 
               text-align:center;">
        GeeksforGeeks
    </h1>
  
    <svg viewBox="0 0 450 150" 
        xmlns="http://www.w3.org/2000/svg">
      
        <text x="0" y="40" word-spacing="-10">
            GeeksforGeeks is a Computer 
            Science portal
        </text>
    </svg>
</body>
  
</html>


Output:



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