SVG text element
Jakob Jenkov |
The SVG <text> element is used to draw text in an SVG image.
SVG text Video
Here is a video version of this tutorial:
Text Example
Here is a simple example:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="20" y="40">Example SVG text 1</text>
</svg>
This example defines a text positioned at x = 10 and y = 40. The text to be displayed is "Example SVG text 1".
Here is the resulting image:
Text Definitions
Before diving deeper into SVG text, here are three definitions that are good to know:
-
Glyphs
Glyphs are visual representations of letters or symbols. Thus, the letter "a" can be drawn using many different glyphs, since there are many different visual representations of the letter "a".
-
Fonts
Fonts are collections of glyphs which can visualize a set of letters and symbols.
- Characters
Characters are a digital (binary) representation of a letter or symbol. A character may take 1 or more bytes to represent. When a computer renders characters, it maps those characters to glyphs in a font.
Positioning Text
The position of the text is determined by the x and y attributes of the
<text> element. The x-attribute determines where to locate the left edge of the text (the start of the text).
The y-attribute determines where to locate the bottom of the text (not the top).
Thus, there is a difference between the y-position of a text and the y-position of lines, rectangles, or other shapes.
This example shows a text and a line which both have y-position 40:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="20" y="40">Example SVG text 1</text>
<line x1="10" y1="40" x2="150" y2="40" style="stroke: #000000"/>
</svg>
Notice how the y-position of the text refers to the bottom of the text, not the top.
Text Anchor
The anchor of a text determines what part of the text that is positioned at the x-position specified in
the x attribute of the text element. By default the anchor of
a text is the left edge of the the text. The beginning of the text. But you can also use the middle of
the text as anchor, or the right edge - the end of the text.
You can set the text-anchor CSS property to set the anchor of a text. It can take
three values: start, middle and end. Here is
an SVG text-anchor example showing the three different text anchor options:
The vertical line shows the X-position of all three texts. All three texts have x="50".
You can see how the three texts are anchored differently.
Here is the SVG code used for the three texts above:
<text x="50" y="20"
style="text-anchor: start">
Start
</text>
<text x="50" y="40"
style="text-anchor: middle">
Middle
</text>
<text x="50" y="60"
style="text-anchor: end">
End
</text>
Text Stroke and Fill
Like other SVG shapes, text can have both a stroke and fill set on it. If you specify only a stroke, the
text will appear as an outline of the text. If you specify only a fill, the text will look as text is
rendered normally. Here are three examples showing the combinations of stroke and fill:
The first line of text only has fill set. The second line has only stroke set. Notice how only the outline of the text is drawn. The third line has both stroke and fill set. Notice how the fill color is gray.
Here is the SVG code used to generate this image:
<text x="20" y="40"
style="fill: #000000; stroke: none; font-size: 48px;">
Fill only
</text>
<text x="20" y="100"
style="fill: none; stroke: #000000; font-size: 48px;">
Stroke only
</text>
<text x="20" y="150"
style="fill: #999999; stroke: #000000; font-size: 48px;">
Fill and stroke
</text>
Notice that I have set the font-size to 48px
to better illustrate the effect of stroke and fill.
You can of course set the stroke-width property too, if you want
the outline to be bigger. Here is an example which sets the stroke-width
to 2:
You can read more about how you can style the stroke of a text (and any other SVG shape) in the text on SVG stroke.
You can also read about how to fill text in the text on SVG fill, and in the texts on SVG gradients, SVG fill patterns and SVG Masks.
Letter Spacing and Kerning
Letter spacing and kerning (distance between glyphs) can be controlled using the
style attributes letter-spacing and kerning. I do not
know which of these is best to use. Here are two simple examples:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="20" y="20" >Example SVG text</text>
<text x="20" y="40" style="kerning:2;">Example SVG text</text>
<text x="20" y="60" style="letter-spacing:2;">Example SVG text</text>
</svg>
Here is the resulting image:
The number value used in letter-spacing or kerning is added to the normal
letter spacing or kerning. If you use a negative number, the spacing will decrease.
Word Spacing
You can set the word spacing of a text using the word-spacing CSS property.
The word spacing is the amount of white space between the words in the text.
Here is an example:
<text x="20" y="20">
Word spacing is normal
</text>
<text x="20" y="40"
style="word-spacing: 4;">
Word spacing is 4
</text>
<text x="20" y="60"
style="word-spacing: 8;">
Word spacing is 8
</text>
Here is the resulting image. Note: At the time of writing, Firefox did not support
the word-spacing CSS property.
The number value specified in the word-spacing attribute is added to the normal word spacing. If you
use the value normal or omit the word-spacing propety entirely, nothing will be added.
If you specify a negative number, the space between
words will decrease.
Text Layout - No Word Wrap
There is no automatic word wrapping in SVG. You will have to position the text
yourself, and break it into multiple lines. You can get some help from the
relative positioning possible with the <tspan> element.
It is also possible to layout text along a path, for instance along a circle
or spline. You can do this using the <textpath> element.
Rotating Text
It is possible to rotate SVG text just like it it is possible to rotate any other SVG shape. You rotate texts and shapes using SVG transformations. Here is an example:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="20" y="40"
transform="rotate(30 20,40)"
style="stroke:none; fill:#000000;"
>Rotated SVG text</text>
</svg>
And here is the resulting image:
The rotation is caused by the transform attribute, which is explained in
SVG transformations.
Vertical Text
It is possible to show vertical text by rotating the text, but there is another way to display vertical text.
You can do so by setting the writing-mode CSS property to tb (Top to Bottom).
At the time of writing Firefox (22) did not support this feature.
Here is an SVG writing-mode example:
<text x="10" y="20" style="writing-mode: tb;">
Vertical
</text>
Here is the resulting image:
If you want the letters to appear without rotation, but still ontop of each other vertically, you
can do so by setting the glyph-orientation-vertical CSS property to 0. This property
sets the rotation of the glyphs. The default is 90.
Here are some glyph-orientation-vertical examples:
<text x="10" y="10" style="writing-mode: tb; glyph-orientation-vertical: 0;">
Vertical
</text>
<text x="110" y="10" style="writing-mode: tb; glyph-orientation-vertical: 90;">
Vertical
</text>
Here is the resulting image:
You can adjust the letter spacing using the letter-spacing CSS propety too.
Here are two examples with different letter-spacing:
<text x="10" y="10" style="writing-mode: tb; glyph-orientation-vertical: 0;">
Vertical
</text>
<text x="50" y="10" style="writing-mode: tb; glyph-orientation-vertical: 0;
letter-spacing: -3;">
Vertical
</text>
Here is the resulting image. Notice how the text with negative letter-spacing
has less vertical space between the glyphs.
Text Direction
You can set the direction the text is rendered using the direction CSS property.
The direction property can take two values: ltr and rtl.
These values means "Left To Right" and "Right To Left". You also have to set the unicode-bidi
CSS property to bidi-override.
Here is an SVG text direction example:
<text x="100" y="40" style="direction: rtl; unicode-bidi: bidi-override;">
Left to right
</text>
This example sets the direction CSS property to rtl (right to left).
Here is the resulting image:
Styling Text
Here is a list of the text-specific CSS properties you can use to style text. Remember that you can also style the stroke and fill of text, and use gradients, fill patterns and masks to style text too.
You have to write the attribute names in lower-case as done in the table, or the SVG viewers tend to ignore them!
| Attribute | Description |
| font-family | The font to use, for instance 'Arial' or 'Verdana'. |
| font-size | The size of the font, for instance '12px' or '24px'. |
| kerning | Spacing between letters, for instance '2' or '3' (default=1). |
| Spacing between letters, for instance '2' or '3'. Similar to kerning. | |
| Spacing between words, for instance '2' or '3'. | |
Can be any of none, underline, overline and line-through. |
|
| stroke | The outline color of the font. By default text only has fill color, not stroke. Adding stroke will make the font appear bold. |
| The width of the outline color of the font. | |
| fill | The fill color of the font. |
Here is an example using some of these attributes:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="20" y="40"
style="font-family: Arial;
font-size : 34;
stroke : #000000;
fill : #00ff00;
"
>Styled SVG text</text>
</svg>
Text Length
You can set the length of a text using the textLength attribute of the <text> element.
The length of the text is then made to fit the specified length by adjusting the space between the characters, and
the size of the glyphs.Using the lengthAdjust attribute you can specify if both letter spacing and
glyph size should be adjusted.
Here are three SVG textLength and lengthAdjust examples:
<text x="5" y="20" textLength="140" lengthAdjust="spacing">
A long, long, long text.
</text>
<text x="5" y="40" textLength="200" lengthAdjust="spacing">
A long, long, long text.
</text>
<text x="5" y="60" textLength="200" lengthAdjust="spacingAndGlyphs">
A long, long, long text.
</text>
Here is the resulting image. Notice the different types of spacing on the last two texts.
At the time of writing Firefox did not have support for these attributes.
Related SVG Elements
The following SVG elements are related to the <text> element, meaning
they also work with text (click the element names to read more):
| Tweet | |
Jakob Jenkov | |
