Skip to content
Related Articles

Related Articles

Improve Article

SVG word-spacing Attribute

  • Last Updated : 03 Nov, 2020

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:

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :