Extending Your Toolbox

Chapter 12 introduces the SVG <foreignObject> element, and shows how it can be used to include CSS-formatted HTML text within an SVG image.

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 12-1 & Figure 12-1 (using <foreignObject> to creating scrolling, wrapping text blocks):
  • SVG file
  • screenshot
• Figure 12-1 (adding hover effects):
  • SVG file
  • partial screenshot

Return to the main table of contents.