SVG Text Layout

Chapter 4. Multiline SVG Text

A single SVG <text> element creates a single line of text. It does not—in SVG 1.1, anyway—have any way of wrapping text to a new line. For this reason, when text consists of more than independent short labels, individual <text> elements positioned at explicit points on the page are usually insufficient.

For longer text, you need to break the text into smaller chunks to position them separately. However, you often still want to coordinate the position of different words to reflect that they are part of a continuous whole. This is true not only for normal paragraph-like text wrapping, but also for an area in which SVG excels: complex text layouts used in posters, advertisements, and poetry.

Individual spans of SVG text can be shifted from their natural position, or repositioned completely. This chapter discusses the basic attributes to position spans of text, showing how you can move the virtual typewriter to a new point on the page. However, many style options affect the final position of the characters, and the following chapters will introduce these complexities.

Stepping Up

The <tspan> element can be used to identify segments of text for positioning as well as for styling. By default, each <tspan> is aligned next to the previous character in the text string, but attributes can reset or adjust that position.

Tip

Although a <tspan> element can be positioned independently, it cannot be used on its own: it must be inside a <text> element, which declares ...