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
