SVG: Text Element

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

[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