SVG 'tspan' element

The <tspan> element is used to draw multiple lines of text in SVG. The <tspan> element makes it possible to position a line of text relatively to the previous line of text, you don't need position each line absolutely. The <tspan> element has the following attributes:

• x and y attributes define coordinates for the current text position. If there are multiple x or y coordinates the position of every character is defined.
• dx and dy attributes define supplemental shifts along the x- ans y-axis. Using dx and dy attributes it is possiple to position the text vertically and horizontally.
• rotate attribute defines supplemental rotation to each character within the element.
• textLength attribute sets the length for the text that will be displayed with an SVG viewer. The default value is the text's normal length.

Here is a simple example:

  <text  fill="grey">
    	<tspan font-weight="bold" fill="#9d1d20" dy="50"> Up </tspan>
		and
        <tspan font-weight="bold" fill="#9d1d20" dy="30"> Down </tspan>
  </text>	

Here is the resulting image: