SVG Colors, Patterns & Gradients

Chapter 12. Textured Text

We’ve now shown a few examples of using patterns to fill text, and we highlighted some other text styling options at the end of Chapter 11. We also used stroked text to demonstrate the paint-order property back in Chapter 2.

Throughout, we’ve emphasized that filling and stroking text in SVG is similar to filling shapes.

For the most part, that’s true. However, there are a few differences with respect to paint servers, which stem from the way object bounding boxes are calculated for text. This chapter looks at paint servers and text more closely.

The differences between painting text and painting shapes are especially important if you are considering replacing text with shapes. Most graphics programs offer a text-to-path conversion that can preserve the visual appearance of text in a particular font, without the complications of having to distribute that font with your graphic on the Web, and without the unreliability of many browsers’ text rendering bugs (particularly on mobile devices). Depending on how it is implemented, this conversion may create subtle differences or quite significant changes in the way the letterforms are painted.

Tip

Converting text to path also makes it inaccessible to screen readers, or to regular users who want to search for, copy, or translate the text content. Be sure to provide machine-readable alternatives for any text as shapes.

The SVG specifications include numerous options for controlling the layout of text, some of ...