Colorful Language

Chapter 3 briefly covers SVG’s fill and stroke properties for controlling the visual appearance of text.

The links below will open the live example files or high-res PNG or JPEG screenshots in a new browser tab. Alternatively, you can download the entire collection as a zip archive or fork it as a GitHub repository. Be sure to read the O’Reilly Media policy on the use of example code.

Example 3-1 & Figure 3-1 (outlined SVG text as HTML headings):
- HTML file
- screenshot
Example 3-2 & Figure 3-2 (currentColor and inline icons):
- HTML file
- screenshot
Figure 3-3 (demonstration of quirky errors in currentColor example):
- HTML file
- screenshot
Example 3-3 & Figure 3-4 (gradient-filled SVG text):
- SVG file
- screenshot
Example 3-4 & Figure 3-5 (gradient-filled SVG text as HTML headings):
- HTML file
- screenshot
Example 3-5 & Figure 3-6 (using <tspan> to change styles):
- SVG file
- screenshot
Figure 3-7 (using <tspan> with paint servers):
- HTML file
- screenshot