Basic Drawing > Text > Word Wrapping

Print this Page             Close Window

Word Wrapping

SVG performs no automatic line breaking or word wrapping. The <tspan> element can be used to realize line breaking and layout arrangement.

The <tspan> Element

  • The <tspan> element adjusts text properties within a <text> element. All of the attributes apply to the <text> element also apply to the <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 x, y, dx, dy and rotate on the <tspan> element are useful for minor positioning adjustments between characters or for major positioning adjustments to achieve a different visual effect.
  • The <tspan> element can also be used for multi-line text.

Code Example

SVG Image

<?xml version="1.0" standalone="no"?>

Right-click on the image to open the SVG viewer pop-up menu.
Click 'view SVG' to display the image in a new, full window to zoom & pan the image.  (SVG Viewer Tips)

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="500" height="500">

<!-- Text with different properties -->
<text x="3" y="80" style="font-family:times; font-size:15; font-weight:bold">This
<tspan style="font-style:italic; font-size:34; fill:red">is </tspan>
<tspan style="font-family:verdana">an </tspan>
<tspan style="font-family:arial; font-style:normal; font-size:20; fill:blue">Example.</tspan>
</text>

<!-- Text Rotation -->
<text x="5" y="160" rotate="20,30,40,50,50,0,-10,-20,0,20,60" fill="green" font-size="25">Hello World</text>

<!-- Text decoration -->
<g font-size="20" fill="brown" >
<text x="5" y="240" text-decoration="overline" >Overline</text>
<text x="5" y="270" text-decoration="line-through" >Line-Through</text>
<text x="5" y="300" text-decoration="underline" >Underlined</text>
</g>

<!-- Multi-line text -->
<text x="25" y="360" fill="purple" font-size="18">
<tspan>Line 1</tspan>
<tspan x="35" dy="1em">Line 2</tspan>
<tspan x="45" dy="1em">Line 3</tspan>
</text>

</svg>

Code explanation

Different Properties: The first example uses bold, italics, and a different font, size, color all in one sentence. The <tspan> elements can be embedded within a <text> element to handle all of the text-rendering needs within that sentence.

Text Rotation: 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. In the second example, a list of numbers are used to define the orientation of each character in the text sequence. The number list of '20,30,40,50,50' controls the rotation of each character of the word 'Hello' while number list of '20,30,40,50,50' control the rotation of the word 'World'. A positive value makes a clock-wise rotation; a negative value makes an anti-clock-wise rotation.

Text Decoration: SVG contains an attribute value called text-decoration, used for underlining or otherwise "decorating" text. The values used with text-decoration are: underline, overline, line-through.

Mutli-line Text: Multi-line text elements can be defined by using different <tspan> elements for each line of text, with attributes x, y, dx and/or dy defining the position of each <tspan>.