SVG: Text Element Tutorial
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>
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>
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>
<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>
“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>
<svg width="100" height="100"> <text x="0" y="50">ab<tspan dy="-10">c</tspan></text> </svg>
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>
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 valuetb
(top to bottom)
<svg width="100" height="100"> <text x="50" y="50" transform="rotate(-90 50 50)">mouse</text> </svg>
<svg width="100" height="100"> <text x="50" y="50" writing-mode="tb">bird</text> </svg>
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>
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 thefill
,stroke
,stop-color
,flood-color
andlighting-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