SVG text is real text: it stays selectable and searchable, and it is drawn with fonts
the reader finds by name. A picture that uses text therefore depends on those fonts
being installed, unless the file embeds them with @font-face or turns the
letters into paths. The explorer’s Resources tab lists every font name used and says
which are generic families, which are defined in the file and which must be installed.
Elements
| Element | Attributes | Notes |
|---|---|---|
text | x, y, dx, dy, rotate, textLength, lengthAdjust, transform | A text block. x and y are the start of the first glyph’s baseline, each a list with one value per character. Content may be character data and tspan, textPath, a and (SVG 1.1) tref children. |
tspan | the same positioning attributes | A run inside text with its own position or style. It may nest. |
textPath | href / xlink:href, startOffset, method, spacing, side (SVG 2), path (SVG 2), textLength, lengthAdjust | Lays the text along the path that href names. In SVG 1.1 the target has to be a path; SVG 2 allows any basic shape, and its own path attribute holds path data directly. |
Attributes that position text
| Attribute | Value | Meaning |
|---|---|---|
x, y | list of lengths | Absolute position of each character from the first listed; a character after the end of the list follows the one before it. |
dx, dy | list of lengths | Shift of each character from where it would be. |
rotate | list of angles | Rotation of each glyph about its start point; the last value applies to all the rest. |
textLength | length | The width the text should come to. lengthAdjust is spacing (adjust gaps only, the default) or spacingAndGlyphs (stretch glyphs too). |
startOffset | length or percentage | How far along the path the text starts. |
method | align or stretch | Whether glyphs are only placed on the path or bent to follow it. |
spacing | auto or exact | How the reader spaces glyphs along the path. |
side | left or right | SVG 2: which side of the path the text sits. |
The font and text properties (font-family, font-size,
text-anchor, letter-spacing, writing-mode and
the rest) are listed on the text
attributes page. White space is collapsed unless xml:space="preserve"
(SVG 1.1) or white-space (SVG 2) says otherwise.
SVG 1.1 only
| Element | What it did |
|---|---|
tref | Copied the character data of another element (href) into the text. |
altGlyph, altGlyphDef, altGlyphItem, glyphRef | Chose substitute glyphs, from fonts or glyph sets, for the characters inside. Browsers show the plain text instead. |
SVG 2 removed them. SVG Tiny 1.2 has its own textArea for wrapped text;
SVG 2 handles wrapping with the CSS properties inline-size and
shape-inside, which few renderers support yet.
Not described
This page is partial.
- Reference: the full text layout rules (character positioning, bidirectional text, vertical text, SVG 2 wrapping with
inline-sizeandshape-inside) are only touched on and were written without the specification text open. The SVG 1.1altGlyphfamily is named, not described in detail. - Viewer: lists text elements, their fonts and the positioning attributes’ values. It does not lay text out, load fonts, or measure text.