The second most important drawing element is text. It has a large number of styling properties and attributes that will be discussed later. Here are define the three main elements:

  • Text defined just using the text element
  • Text using the tspan element to vary the properties and attributes being used in the text presentation
  • Text where the path is defined by the textPath element
Abracadabra This is multi-line text or text with different properties that can be produced using the tspan element We go up, then we go down, then up again around his head. Now we are upside down as we go round his neck and along the bottom to the tail. 
<text x="20" y="50">Abracadabra</text>

<text x="220" y="20">
<tspan x="220" dy="30">This is multi-line</tspan>
<tspan x="220" dy="30">text or text</tspan>
<tspan x="220" dy="30" style="fill:white;stroke:green">with different properties</tspan>
<tspan x="220" dy="30"  rotate="30">that can be produced</tspan>
<tspan x="220" dy="30">using the tspan element</tspan>
</text>

<path  id="duck" d="M  0  312 C  40 360 120 280  160  306 ...Z"/>

<text style="font-size:12px">
<textPath xlink:href="#duck">
We go up, then we go down, then up again around his head. Now we are upside down as 
we go round his neck and along the <tspan dy="-30">bottom</tspan><tspan dy="30"> to the tail.</tspan>
</textPath>
</text>

Note that the link to the duck path uses xlink:href. SVG defines its linkage using the xlink namespace. When this is used, the xlink namespace must also be specified:

<svg   xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" ...

The use of the text element by itself has attributes x and y that define the origin for the text. The origin is by default at the bottom left of the first character and the characters are displayed from left to right. Attributes associated with the text can change the start position, the characteristics of the text and the drawing direction. We will discuss these later.

If the position of parts of the text or the text's attributes need to change from that which is available using the text element, these can be adjusted by including within the text element a tspan element. The text within a tspan may have its origin specified either by absolute x and y attributes or relative dx and dy attributes. The current text position is incremented by the amount specified in the case of the relative attribute. For both dx and dy, the attribute can be a list in which case the first number defines the increment for the first character, the second defines the increment from that character for the second character and so on. The characters in the text string within the tspan element can each be rotated by a defined number of degrees by using the rotate attribute. Again, a list of numbers can be provided to define the orientation of each character in the text sequence.

Attributes are available for adjusting the length of a text string:

<text x="0" y="50" textLength="300" lengthAdjust="spacingAndGlyphs">Text with length 300</text> 
<text x="0" y="90" textLength="400" lengthAdjust="spacingAndGlyphs">Text with length 400</text> 
<text x="0" y="130" textLength="400" lengthAdjust="spacing">Text with length 400</text>
Text with length 300 Text with length 400 Text with length 400