Jenkov.com
Tutorials Books About
Svg

1 SVG Tutorial
2 SVG Examples
3 A Simple SVG Example
4 Displaying SVG in Web Browsers
5 SVG Coordinate System
6 SVG svg element
7 SVG g element
8 SVG rect element
9 SVG circle element
10 SVG ellipse element
11 SVG line element
12 SVG polyline element
13 SVG polygon element
14 SVG path element
15 SVG marker element
16 SVG text element
17 SVG tspan element
18 SVG tref element
19 SVG textpath element
20 SVG switch element
21 SVG image element
22 SVG a element
23 SVG defs Elements
24 SVG symbol Element
25 SVG use Element
26 SVG and CSS - Cascading Style Sheets
27 SVG Stroke
28 SVG Fill
29 SVG Viewport and View Box
30 SVG Animation
31 SVG Scripting
32 SVG Transformation
33 SVG Gradients
34 SVG Fill Patterns
35 SVG Clip Path
36 SVG Masks
37 SVG Filters




SVG text element


The SVG <text> element is used to draw text in an SVG image.

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:

Start Middle End

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:

Fill only Stroke only Fill and stroke

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:

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

Word spacing is normal Word spacing is 4 Word spacing is 8

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:

Vertical

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:

Vertical Vertical

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.

Vertical Vertical

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:

Left to right

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!

AttributeDescription
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).
letter-spacing    Spacing between letters, for instance '2' or '3'. Similar to kerning.
word-spacing    Spacing between words, for instance '2' or '3'.
text-decoration    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.
stroke-width    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.

A long, long, long text. A long, long, long text. A long, long, long text.

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



Connect with me: Newsletter - Get all my free tips!