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 specify 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. For example, 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's 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.

x and y Anchor Position

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

Text – SVG 1.1 (Second Edition)#TextAnchorProperty

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

Text – SVG 1.1 (Second Edition)#TSpanElement

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:

Text – SVG 1.1 (Second Edition)#BaselineShiftProperty

Vertical Text

You have 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. (note: as of , Firefox does not support writing-mode="tb")

possible values for writing-mode are:

Text – SVG 1.1 (Second Edition)#WritingModeProperty

glyph-orientation-vertical

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

Text – SVG 1.1 (Second Edition)#GlyphOrientationVerticalProperty

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

Text – SVG 1.1 (Second Edition)#TextOnAPath

[see SVG: Structure Elements]

Specify Text Length

textLength = "length"

Text – SVG 1.1 (Second Edition)#TextElementTextLengthAttribute

Text Element Attributes

Text – SVG 1.1 (Second Edition)#TextElement

Text Styles

Font Properties

The following are the same as CSS.

Text Properties

The following are the same as CSS.

Styling – SVG 1.1 (Second Edition)#SVGStylingProperties

Text Element Specific Properties

Other Properties for Visual Media

Reference

Text – SVG 1.1 (Second Edition)

Liket it? Put $1 at patreon.

Or, Buy JavaScript in Depth