Using SVG with CSS3 and HTML5 — Supplementary Material

Example code and online extras for the O'Reilly Media book by Amelia Bellamy-Royds, Kurt Cagle, and Dudley Storey.

Chapter 10
Seeing Double: Reusing Content

This chapter examines the key structural SVG elements that allow you to copy content defined elsewhere into your graphic.

When it comes to reusing content, there are two distinct strategies used in SVG. On the one hand, you can reuse entire images, embedding the complete graphic in your SVG similar to how an <img> element embeds an image in an HTML page. On the other hand, you can reuse individual SVG shapes or groups, from another file or another part of the same file.

With the SVG <image> element, you can embed not only SVG files but also raster image formats. This allows an SVG to include photos and other graphics that cannot effectively be represented with vector drawing elements. Regardless of whether an embedded image was originally SVG or not, when you embed it as an image, it is treated as an indivisible element. It can be manipulated with graphical effects, but its component parts are inaccessible to styles or scripts from the main document.

In contrast, when you duplicate SVG content with a <use> element, you duplicate the vector graphics instructions for that content. The duplicated elements are rendered almost as if they were cloned into the markup, inheriting new styles from the context where they are used.

Figures and Examples#

The file names link to the code view on GitHub. Beware: the linked screenshots are hi-resolution; some have very large file sizes.

View all files for this chapter on GitHub.

Figure 10-1. Playing card graphics created with reused SVG icons
Example 10-1. Reusing SVG icons to draw playing cards
Figure 10-2. A web page using external SVG icons as inline code
Example 10-2. Using SVG icons from an external file in a web page
Figure 10-3. Playing card queens using photographs embedded in the SVG
Example 10-3. Using external images in SVG
Figure 10-4. Profile photos with different aspect ratios: (left) with meet aspect ratio options, and (right) slice settings
Example 10-4. Demonstrating preserveAspectRatio options on embedded images
Example 8-X2. Demonstrating preserveAspectRatio options on embedded images, dynamically
Example 10-X2. Copying external SVG content into a document for reuse

Online Extras#