Text in SVG

Text to be displayed in SVG is held as character data. All text is contained within <text> elements, but can be further nested within <tspan> elements.

When text is displayed, the font defined in the style attribute of the <text> or <tspan> element or in an external CSS style sheet is associated with font tables that define how individual characters are to be displayed in that font. The font tables associate a character with its visual representation—a glyph.

Listing 4.1 illustrates the difference between a glyph and a character. Each of the five glyphs shown in Figure 04.01 represents the uppercase version of a character—in this case, the first letter in the English alphabet, the letter A. Yet each glyph has a different appearance. ...

Get Designing SVG Web Graphics now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.