Tech and Media Labs
This site uses cookies to improve the user experience.




SVG tspan element

Jakob Jenkov
Last update: 2014-06-15

The SVG <tspan> element is used to draw multiple lines of text in SVG. Rather than having to position each line of text absolutely, the <tspan> element makes it possible to position a line of text relatively to the previous line of text. The <tspan> element also makes it possible for the user to select and copy-paste several lines of text at a time, instead not just one text element.

tspan Example

Here is a simple <tspan> example:

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

    <text x="20" y="15">
        <tspan>tspan line 1</tspan>
        <tspan>tspan line 2</tspan>
    </text>
</svg>

Here is the resulting image:

tspan line 1 tspan line 2

Notice how the <tspan> results in the text lines being positioned relative to each other (after each other).

Vertical Positioning

If you want the lines to be positioned relative to each other vertically, you can do so using the dy attribute (delta y):

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

    <text x="20" y="15">
        <tspan>tspan line 1</tspan>
        <tspan dy="10">tspan line 2</tspan>
    </text>
</svg>

Now the second line of text is displayed 10 pixels below the first line of text, because the dy attribute of the second <tspan> element is set to "10". Here is the resulting image:

tspan line 1 tspan line 2

If you want to position a <tspan> element at an absolute y-position, use the y attribute, like you would with a <text> element.

If you write multiple numbers inside the dy attribute, each number is applied to the characters of the text inside the <tspan> element. Here is an example:

<text x="10" y="15">
    <tspan dy="5 10 20">123</tspan>
</text>

Here is the resulting image. Notice how the vertical spacing between the glyphs is now changing.

123

Horizontal Positioning

To position the text relatively on the x-axis you can use the dx attribute (delta x). The example below shows the effect of setting dx to 30. Notice how the second line of text is now displayed 30 pixels relative to the end of the first line of text (not the beginning):

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

    <text x="20" y="15">
        <tspan>tspan line 1</tspan>
        <tspan dx="30" dy="10">tspan line 2</tspan>
    </text>
</svg>

Here is the resulting image:

tspan line 1 tspan line 2

If you specify more than one number inside the dx attribute, each number is applied to each letter inside the <tspan> element. Here is an example:

<text x="10" y="20">
    <tspan dx="5 10 20">123</tspan>
</text>

Here is the resulting image:

123

You can also set the x attribute to fix the x-coordinate of the text lines. This is useful if you want to display a list of lines below each other, all left adjusted. Here is an example that sets x to 10 on three lines:

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

    <text y="20">
        <tspan x="10">tspan line 1</tspan>
        <tspan x="10" dy="15">tspan line 2</tspan>
        <tspan x="10" dy="15">tspan line 3</tspan>
    </text>
</svg>

Here is the resulting image:

tspan line 1 tspan line 2 tspan line 3

Styling tspan Elements

It is possible to style <tspan> elements individually. Thus you can use a <tspan> element to style a block of text differently than the rest of the text. Here is an example:

<text x="10" y="20">
    Here is a <tspan style="font-weight: bold;">bold</tspan> word.
</text>    

Here is the resulting image:

Here is a bold word.

Superscript and Subscript with baseline-shift

You can use the baseline-shift CSS property to create superscript and subscript with the <tspan> element. Here is an SVG baseline-shift example showing how:

<text x="10" y="20">
    Here is a text with <tspan style="baseline-shift: super;">superscript</tspan>
    and <tspan style="baseline-shift: sub;">subscript</tspan> mixed with normal
    text.
</text>
    

Here is the resulting image. At the time of writing Firefox (v. 22) did not support this.

Here is a text with superscript and subscript mixed with normal text.

Jakob Jenkov




Copyright  Jenkov Aps
Close TOC