SVG: Text Element Tutorial

By Xah Lee. Date: 2015-06-30. Last updated: 2018-04-08.

This page is a tutorial on SVG text element.

Text Element

text element is used to add text.

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

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

Use a new “text” element for a new line of text.
use “tspan” with attributes {x, y, dx, dy}.

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.

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

start (default)
middle
end

<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

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

<svg width="100" height="100">
<text x="0" y="50">ab<tspan style="font-weight:bold">c</tspan></text>
</svg>

bold text using “tspan”

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

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

baseline
sub
super
percentage
length
inherit

Vertical Text

You can have vertical text by:

Use the rotate transform on text element. [see SVG: Coordinate Transformation]
use writing-mode property, with value tb (top to bottom)

<svg width="100" height="100">
<text x="50" y="50" transform="rotate(-90 50 50)">mouse</text>
</svg>

vertical text using transform rotate.

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

lr-tb (left to right, top to bottom)
rl-tb
tb-rl
lr
rl
tb
inherit

glyph-orientation-vertical

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

Allowed values are:

auto
angle. Must be one of {0, 90, 180, 270}
inherit

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

lengthAdjust = "spacing"
lengthAdjust = "spacingspacingAndGlyphs"

Text Element Attributes

Text Styles

For Font Size, see SVG: Font Size

Font Properties

The following are the same as CSS.

font
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight

Text Properties

The following are the same as CSS.

direction
letter-spacing
text-decoration
unicode-bidi
word-spacing

Text Element Specific Properties

alignment-baseline
baseline-shift
dominant-baseline
glyph-orientation-horizontal
glyph-orientation-vertical
kerning
text-anchor
writing-mode

Other Properties for Visual Media

clip, only applicable to outermost svg element.
color, used to provide a potential indirect value (currentColor) for the fill, stroke, stop-color, flood-color and lighting-color properties. (The SVG properties which support color allow a color specification which is extended from CSS2 to accommodate color definitions in arbitrary color spaces. See Color profile descriptions.)
cursor
display
overflow, only applicable to elements which establish a new viewport.
visibility

BUY ΣJS JavaScript in Depth