SVG Essentials, 2nd Edition

Chapter 9. Text

While it may be true that every picture tells a story, it’s perfectly all right to use words to help tell the story. Thus, SVG has several elements that let you add text to your graphics.

Text Terminology

Before investigating the primary method of adding text, the <text> element, we should define some terms you’ll see if you read the SVG specification or if you work with text in any graphic environment:

Character

A character, as far as an XML document is concerned, is a byte or bytes with a numeric value according to the Unicode standard. For example, what we call the letter g is the character with Unicode value 103.

Glyph

A glyph is the visible representation of a character or characters. A single character can have many different glyphs to represent it. Figure 9-1 shows the word glyphs written with two different sets of glyphs—look particularly at the initial g—it’s the same character, but the glyphs are markedly different.

Figure 9-1. Two sets of glyphs

Multiple characters can reduce to a single glyph; some fonts have separate glyphs for the letter combinations fl and ff to make their spacing look better (these are called ligatures). Other times, a single character can be composed of multiple glyphs; a print program might create the character é (which has Unicode value 233) by combining the e glyph with a nonspacing accent mark (´).

Font

A font is a collection ...