SVG Text Layout

Appendix A. Text Elements and Attributes

There are three text container elements in SVG: <text>, <tspan>, and <textPath>. However, both <tspan> and <textPath> must always be used inside a <text> element. Also described here is the <foreignObject> element, which is most commonly used to add HTML text to an SVG.

<text>

A self-contained sequence of text content to be included in the graphic, possibly including child elements with styled or positioned text.

x

The horizontal position of the anchor point or points

• A list of space- or comma-separated lengths (with units or as numbers of user units) or percentages (of the coordinate system width)

• Values are assigned to individual characters in the text content of this or child elements

• Default is a single value 0

y

The vertical position of the anchor point or points

• A list of space- or comma-separated lengths (with units or as numbers of user units) or percentages (of the coordinate system width)

• Values are assigned to individual characters in the text content of this or child elements

• Default is a single value 0

dx

The horizontal offsets to be applied to each character’s position

• A list of space- or comma-separated lengths (with units or as numbers of user units) or percentages (of the coordinate system width)

• Values are assigned to individual characters in the text content of this or child elements

• Default is an empty list (no additional offsets)

dy

The vertical offsets to be applied to each character’s ...