SVG and the text

To use text in SVG, you use the ‘text’ label, and you can apply the same effects as to any other SVG element. Next, I’ve stressed the characteristics which I think are of most general interest but, for further detail you have to go to the specification at http://www.w3.org/TR/SVG/text.html.

The main characteristics of the text functioning in SVG are:

• Line breaks are not created automatically, instead you have to create them with the ‘tspan’ label inside the ‘text’ label or with several ‘text’ labels. This makes the use of html more recommendable in paragraphs with several lines.
• Texts can go on a straight line or adjust to a trace.
• Texts are accessible.
• You can use fonts with SVG fonts and webfonts.

The following example shows how the default text aligns on the baseline of the font. We can modify this behavior with the ‘alignment-baseline’ attribute.

The ‘x’ and ‘y’ coordinates can have 1 or several values, separated by spaces or commas, affecting the text characters.

We can also change the relative position of the text with the ‘dx’ and ‘dy’ attributes, taking into account that the following text will keep this relative position.

With ‘textLength’ we can adjust the text to be adapted to the box size given by the value of the attribute which adjust the properties ‘x’, ‘y’, ‘kerning’, ‘letter-spacing’, ‘dx’ and ‘dy’.

To create new lines in the same text block, we’ll use the ‘tspan’ label with the ‘x’ and ‘y’ attributes.

The ‘rotate’ attribute allow us to rotate the characters and it takes several values to rotate different letters. Child labels inherit the values but we can assign them new values.

We can index a text with the ‘tref’ label in a similar way to how we do with the graphic elements with the ‘use’ label.

The text, besides going in a straight line, can follow a path. To do that, you have to place a ‘textPath’ label with an ‘xlink:href’ attribute with the ‘id’ of the ‘path’.