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 20
Good Manners: Best Practices for SVG

An image is more than just a collection of details, and a complex SVG document is more than just a series of independent elements and styles. When you are starting a project, it is worthwhile to take some time to plan your approach.

This chapter summarizes some of our best advice for managing SVG on the web: from planning your project, to working with graphical editors, then coordinating your code and testing it. If you are building an important website component using SVG, a little bit of up-front strategy and analysis can help save time and frustration later.

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 20-1. A heart drawn in Illustrator using eight curve segments
Figure 20-2. A heart drawn using two cubic Bézier segments
Figure 20-3. A heart drawn as a round-capped stroke on a V-shape open-ended path
Figure 20-4. An SVG illustration with CSS drop-shadow filter

Online Extras#