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

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

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

Text – SVG 1.1 (Second Edition)#WritingModeProperty

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 , Firefox does not support writing-mode="tb" nor glyph-orientation-vertical)

Text – SVG 1.1 (Second Edition)#GlyphOrientationVerticalProperty

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 Path Tutorial]

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

SVG Topics

  1. SVG: Basic Examples
  2. SVG Path Tutorial
  3. SVG Path: Elliptical Arc
  4. SVG: Specifying Styles
  5. SVG: Basic Shape Styles
  6. SVG: Viewport
  7. SVG: viewBox, User Coordinate
  8. SVG: Coordinate Transformation
  9. SVG: Text Element Tutorial
  10. SVG: Structure Elements
  11. JS: Scripting SVG, Basic Example
  12. JS: SVG Clock
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

Ask me question on patreon