SVG <tspan> Element

The SVG <tspan> element is used to draw multi-line text in SVG. It is not necessary to position each line of text absolutely; the <tspan> element makes it possible to place a line of text relative to the previous line. The <tspan> element also allows users to select and copy/paste several lines of text at once, not just a single text element.

tspan example

This 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>

This is the result image:

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

Vertical positioning

If you want to vertically position the line relative to the others, you can use 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, since the dy attribute of the second <tspan> element is set to " 10". Therefore, the second line of text is displayed below the first line of text10pixels. This is the result image:

If you want to position the <tspan> element at an absolute y position y, use the properties like the <text> element.

If multiple numbers are written within the dy attribute, each number will be applied to the characters in the <tspan> element. Here is an example:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　　　　　<text x="10" y="15">
　　　　　　　　　　　　<tspan dy="5　10　20">
　　　　　　　　　　　　　　　　123
　　　　　　　　　　　　</tspan>
　　　　　　　　</text>
　　　　</svg>

This is the generated image. Note how the vertical spacing between characters changes.

Horizontal positioning

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

<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>

This is the result image:

If multiple numbers are specified within the dx attribute, each number will be applied to each letter within the <tspan> element. Here is an example:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><text x="10" y="20">
　　　　<tspan dx="5　10　20">123</tspan>
</text></svg>

This is the result image:

You can also set the x attribute to fix the x coordinate of the text line. This is useful if you want to display a list of all unadjusted lines below each other. Here is an example where x is set to10　Example:

<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>

This is the result image:

tspan style element

You can set the style of elements individually. Therefore, you can use the <tspan> element to set the style of a text block to make it different from the rest of the text. Here is an example:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><text x="10" y="20">
　　　　Here is a <tspan style="font-weight: bold;">bold</tspan> word.
</text></svg>

This is the result image:

Superscript and subscript baseline offset

You can use baseline-Shift CSS properties use the <tspan> element to create superscripts and subscripts. This is an SVG baseline.-Shift example, showing how to:

<svg width="500" height="100">　　　　
<text x="10" y="20">　　　　
Here is a text with <tspan style="baseline"-shift: superscript>superscript</tspan>　　　　
and <tspan style="baseline"-shift: subscript>subscript</tspan> mixed with normal　　　　
text.　　　　
</text>　　　　
</svg>

This is the generated image. (Note: Firefox may not support it)