SVG <tspan> Element

SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas.

The SVG <tspan> element defines a subtext within a <text> element or another <tspan> element. It allows for adjustment of the style and/or position of that subtext as per user needs.

Syntax:

<tspan attributes="" >
    Subtext
</tspan>

Attribute:

x: x axis coordinates of glyphs.
y: y axis coordinates of glyphs.
dx: shift along with x-axis.
dy: shift along with y-axis.
rotate: rotation of glyphs.
textlength: render the text’s length.
lengthAdjust: adjustments with the rendered length.

Example 1:

html

<!DOCTYPE html>

<html>
 
<body>

    <svg viewBox="0 0 400 400" 

         xmlns="http://www.w3.org/2000/svg">

        <style>

            tspan { font: bold; fill: green; }

        </style>
 
        <text x="10" y="30" class="small">

            <tspan>GeekforGeeks</tspan>: 

       Computer Science Portal for Geeks!

        </text>
 
    </svg>

</body>
 
</html>

Output:

Example 2: Fading the color of the rectangle

html

<!DOCTYPE html>

<html>
 
<body>

    <svg viewBox="0 0 400 400" 

         xmlns="http://www.w3.org/2000/svg">

        <style>

            tspan { fill: green; font: bold 40px sans-serif;}

        </style>
 
        <text x="10" y="30" class="small">

            This is <tspan>Large</tspan> Text

        </text>
 
    </svg>

</body>
 
</html>

Output:

Browsers Supported: The following browsers are supported by this SVG element:

Google Chrome 1 and above
Edge 12 and above
Internet Explorer 9 and above
Firefox 1.5 and above
Apple Safari 3 and above
Opera 9 and above

Article Tags :

HTML

Web Technologies

HTML-SVG

SVG-Element