Text in SVG with <text> and <tspan>

Text is rendered within a <text> element. The starting point of the text baseline is determined by the x and y attributes. The x-attribute determines where to locate the left edge of the text (the start of the text), unless set otherwise through attribute text-anchor. The y-attribute determines where to locate the bottom of the text (not the top). Thus, there is a difference between the y-position of a text and the y-position of lines, rectangles, or other shapes. This example shows a text and a line which both have y-position 40:

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

    <text x="20"  y="40">Example SVG text 1</text>
    <line x1="10" y1="40" x2="150" y2="40" style="stroke: #000000"/>

</svg>

There is no automatic word wrapping in SVG. You will have to position the text yourself, and break it into multiple lines. You can get some help from the relative positioning possible with the <tspan> element.

Text anchor (attribute `text-anchor`)

The anchor of a text determines what part of the text is positioned at the x-position specified in the x attribute of the text element. By default the anchor of a text is the left edge of the the text, the beginning of the text. But you can also use the middle of the text as anchor, or the right edge - the end of the text.

You can set the text-anchor CSS property to set the anchor of a text. It can take three values: start, middle and end.

<text x="50" y="20"
      style="text-anchor: start">
    Start
</text>
<text x="50" y="40"
      style="text-anchor: middle">
    Middle
</text>
<text x="50" y="60"
      style="text-anchor: end">
    End
</text>

Text stroke and fill

Like other SVG shapes, text can have both a stroke and fill set on it. If you specify only a stroke, the text will appear as an outline of the text. If you specify only a fill, the text will look as text is rendered normally. You also set the stroke-width property.

<tspan> for showing multiline text

The SVG <tspan> element (meaning a span of text) 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.)

You will probably want the lines to be positioned relative to each other vertically. You can do so using the dy attribute:

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

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

And to position the text relatively on the x-axis you can use the dx attribute

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.

Styling text with <tspan>

You can style <tspan> elements individually. Use a <tspan> element to style a block of text differently than the rest of the text, for instance to set a word in bold:

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

To create a superscript or a subscript use the baseline-shift CSS property, as in:

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

Text transformations

It is possible to rotate SVG text just like it it is possible to rotate any other SVG shape. Here is an example:

<text x="20"  y="40"
  transform="rotate(30 20,40)">Rotated SVG text</text>

Text Length

You can set the length of a text using the textLength attribute of the <text> element. The length of the text is then made to fit the specified length by adjusting the space between the characters, and the size of the glyphs. Using the lengthAdjust attribute you can specify if both letter spacing and glyph size should be adjusted.

Here are three SVG textLength and lengthAdjust examples:

<text x="5" y="20" textLength="140" lengthAdjust="spacing">
  A long, long, long text.
</text>
<text x="5" y="40" textLength="200" lengthAdjust="spacing">
    A long, long, long text.
</text>
<text x="5" y="60" textLength="200" lengthAdjust="spacingAndGlyphs">
    A long, long, long text.
</text>

Styling Text in SVG

Here is a list of the text-specific CSS properties you can use to style text. Remember that you can also style the stroke and fill of text, and use gradients, fill patterns and masks to style text too.

You have to write the attribute names in lower-case as done in the listing below, or the SVG viewers tend to ignore them!

font-family: The font to use, for instance 'Arial' or 'Verdana'.
font-size: The size of the font, for instance '12px' or '24px'.
?font-weight: This may be bold...
?font-style: This may be italic...
kerning: Spacing between letters, for instance '2' or '3' (default=1).
letter-spacing: Spacing between letters, for instance '2' or '3'. Similar to kerning.
word-spacing: Spacing between words, for instance '2' or '3'.
text-decoration: Can be any of none, underline, overline and line-through.
stroke: The outline color of the font. By default text only has fill color, not stroke. Adding stroke will make the font appear bold.
stroke-width: The width of the outline color of the font.
fill: The fill color of the font.