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
-
- SVG symbol file, suits-symbols.svg
- Live HTML file, external-suits.html
- PNG screenshot, external-suits.png
- See also Example 9-4 in Chapter 9, including the Raw CSS file, sprites-suits.css
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
-
- Live HTML file, flex-scale-image-options.html
- From the “Dynamically Changing preserveAspectRatio” extra article.
- Example 10-X2. Copying external SVG content into a document for reuse
-
- Raw JS file, external-SVG-ajax.js
- Live HTML file, external-suits-ajax.html, using that script in the code from Example 10-2
- See the warnings in the “Importing SVG Assets, with AJAX” article before using this script!
Online Extras#
- “Dynamically Changing preserveAspectRatio”: A ready-to-use playground for exploring meet, slice, and none preserveAspectRatio options.
- “Understanding CORS and SVG”: Why doesn't it just work? Cross-origin services and static asset servers are part of modern web development, but they can be a headache for SVG.
- “Importing SVG Assets, with AJAX”: Browser support limitations can restrict your ability to share SVG assets between web pages. A little JavaScript can patch the gaps.
- Reference: SVG Elements and Attributes