tspan

<tspan>

Within a <text> element, text and font properties and the current text position can be adjusted with absolute or relative coordinate values by including a <tspan> element.

Usage context

Categories	Text content element, Text content child element
Permitted content	Character data and any number of the following elements, in any order: Descriptive elements `<a>`, `<altGlyph>`, `<animate>`, `<animateColor>`, `<set>`, `<tref>`, `<tspan>`

Attributes

Global attributes

Specific attributes

x
y
dx
dy
rotate
textLength
lengthAdjust

DOM Interface

This element implements the SVGTSpanElement interface.

Example

SVG

<?xml version="1.0"?>
<svg width="250" height="40" viewBox="0 0 250 40"
    xmlns="http://www.w3.org/2000/svg" version="1.1">

  <style>
<![CDATA[
text{
  font: 20px Verdana, Helvetica, Arial, sans-serif;
}

tspan{
  fill: red;
  font-weight: bold
}
]]>
  </style>

  <text x="15" y="30">
    You are 
    <tspan>not</tspan> 
    a banana
  </text>
</svg>

Result

Specifications

Specification	Status	Comment
Scalable Vector Graphics (SVG) 2 The definition of '<tspan>' in that specification.	Candidate Recommendation
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of '<tspan>' in that specification.	Recommendation	Initial definition

Browser compatibility

Feature	Chrome	Edge	Firefox (Gecko)	IE	Opera	Safari
Basic support	1.0	(Yes)	1.5 (1.8)^[1]	9.0	9.0	3.0.4

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	3.0	(Yes)	1.0 (1.8)^[1]	No support	(Yes)	3.0.4

The chart is based on these sources.

[1] Various presentation attributes don't work. The attribute rotate was implemented in Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1).