Multiline SVG Text

Chapter 4 gets into more complex text layouts, using formatted poetry as examples.

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 4-1 & Figure 4-1 (using <tspan> to adjust position):
  • SVG file, using absolute positions
  • SVG file, using relative positions
  • screenshot
• Figure 4-2 (combining percentage positions with fixed offsets):
  • SVG file, using positions relative to 50%
  • SVG file, using positions relative to 100%
  • HTML file, embedding the two SVGs as objects (note, the CSS table layout does not render correctly in some browsers)
  • screenshot
• Example 5-3 & Figure 5-3 (“How doth the little crocodile”):
  • SVG file
  • screenshot
• Example 4-3 & Figure 4-4 (“The Mouse's Tale”):
  • HTML file
  • screenshot

Return to the main table of contents.