SVG: Text Element Tutorial

By Xah Lee. Date: . Last updated: .

This page is a tutorial on SVG text element.

Text Element

text element is used to add text.

dog 
<svg width="100" height="100">
<text x="50" y="50">dog</text>
</svg>
basic text example

The {x, y} attributes specify the coordinate to place the text.

note: text in SVG are graphics, as if the font is changed into actual curves. When you use transform such as scaling to enlarge graphic, all text will be scaled too. 〔see SVG: Coordinate Transformation〕

Text Does Not Wrap

Text inside the text element does not automatically wrap (no automatic line breaking).

Unlike HTML, and there is no “pre” element neither.

cat and dog 
<svg width="100" height="100">
<text x="0" y="50">cat and
dog</text>
</svg>
newline doesn't wrap text

How to have newline in SVG text element?

You cannot.

Solution:

Both solutions require you to manually figure out the exact line-height to position your text element.

Text Element Anchor Position

When you have a text element

<text x="50" y="50">cat</text>

The exact anchor position is the lower left of baseline of the first character.

dog 
<svg width="100" height="100">
<circle cx="50" cy="50" r="3" style="fill:red"></circle>
<text x="50" y="50">dog</text>
</svg>

Text Alignment

text-anchor can be used to set the point where the {x,y} means in the text element.

Possible values are:

dog 
<svg width="100" height="100">
<circle cx="50" cy="50" r="3" style="fill:red"></circle>
<text x="50" y="50" text-anchor="middle">dog</text>
</svg>
text centered
dog 
<svg width="100" height="100">
<circle cx="50" cy="50" r="3" style="fill:red"></circle>
<text x="50" y="50" text-anchor="end">dog</text>
</svg>
aligned right

“tspan” Element

tspan is similar to the span element of HTML.

tspan element is used inside text element.

tspan is useful to set different styles for words within a text tag, such as bold text.

tspan is also useful for containing each line within a text element.

You can also use tspan to adjust position of a word or letter. Use attribute dy to change position relative to the current text element's position.

The most useful attribute for tspan is {dx, dy}. They are position offset relative to the char's normal position.

tspan also have attributes {x, y} for absolute positioning.

abc 
<svg width="100" height="100">
<text x="0" y="50">ab<tspan style="font-weight:bold">c</tspan></text>
</svg>
bold text using “tspan”
abc 
<svg width="100" height="100">
<text x="0" y="50">ab<tspan dy="-10">c</tspan></text>
</svg>
superscript using “tspan”, with dy offset.

Multiple Values of X and Y Attribute

Each of the attribute “x” and “y” can be a sequence of numbers. The second number is the position of the second character, The third number is the position of the third character, etc.

dog 
<svg width="100" height="100">
<text x="0 10 50" y="100 90 80">dog</text>
</svg>
multiple values of x y

Superscript, subscript, with Baseline Shift

baseline-shift property can be used with text element or tspan, to shift characters up or down.

possible values:

Vertical Text

You can have vertical text by:

mouse 
<svg width="100" height="100">
<text x="50" y="50" transform="rotate(-90 50 50)">mouse</text>
</svg>
vertical text using transform rotate.
bird 
<svg width="100" height="100">
<text x="50" y="50" writing-mode="tb">bird</text>
</svg>
vertical text with writing-mode property.

Possible values for writing-mode are:

glyph-orientation-vertical

glyph-orientation-vertical can be used to have letters oriented sideway.

Allowed values are:

LOVE 
<figure class="svg_example">
<svg width="100" height="100">
<text x="20" y="20" writing-mode="tb" glyph-orientation-vertical="0">LOVE</text>
</svg>
vertical text with {writing-mode, glyph-orientation-vertical } (note: as of 2015-08-17, Firefox does not support writing-mode="tb" nor glyph-orientation-vertical)

Text on a Path

To have text on a curve, use textPath element with a xlink:href attribute that refers to a previously defined path element.

The textPath should have a xlink:href attribute, with value of a path element's id.

〔see SVG Path Tutorial〕

〔see SVG: Structure Elements〕

Specify Text Length

textLength = "length"

Text Element Attributes

Text Styles

For Font Size, see SVG: Font Size

Font Properties

The following are the same as CSS.

Text Properties

The following are the same as CSS.

Text Element Specific Properties

Other Properties for Visual Media