SVG Text Basics

Chapter 2 introduces the SVG <text> element and the basic attributes for positioning simple text labels within a graphic, including the particular issues of sizing text within a scalable coordinate system.

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 2-1 & Figure 2-1 (basic SVG text):
Example 2-2 & Figure 2-2 (changing text size):
- SVG file
- screenshot
Example 2-3 & Figure 2-3 (coordinate systems and text size in inline SVG):
- HTML file
- screenshot
Figure 2-4 (styled SVG text):
Example 2-4 & Figure 2-5 (filter effects on SVG text):
- SVG file
- screenshot
Figure 2-6 (wood lily graphic, without labels):
- SVG file
- screenshot
Figure 2-7 (wood lily graphic, with title):
- SVG file
- screenshot
Example 2-5 & Figure 2-8 (wood lily graphic, with interactive labels):
- SVG file
- screenshot

Return to the main table of contents.