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 1
Graphics from Vectors: An Overview of SVG

There's a fundamental chicken-and-egg quality to creating SVG that can make teaching it a challenge. Shapes without styles are not terribly attractive; styles without shapes cannot be seen. To work with an SVG, you need to display the graphic on the web; to display a graphic, you need some SVG code to display!

This chapter presents a rough sketch of the chicken and the egg, so that subsequent chapters can fill in the details one topic at a time, without feeling like large parts of the picture are missing.

The chapter starts with a simple SVG graphic and then adapts it, to use different techniques and to add new functionality. The examples will introduce many key features of SVG, but will skip over many others. At the end, you should have a good idea of what an SVG file looks like, how the key elements relate to each other, and how you can edit the file to make simple changes.

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.

Example 1-1. Defining an inline SVG element in an HTML file
Figure 1-1. Primary color stoplight graphic
Example 1-3. Drawing a primary color stoplight in a stand-alone SVG file
Example 1-2. Drawing a primary color stoplight in inline SVG
Figure 1-2. SVG and HTML files open in multiple web browser tabs
Example 1-4. Grouping elements within an SVG stoplight
Example 1-5. Using inline styles in the SVG stoplight
Example 1-6. Re-using elements to draw an SVG stoplight
Figure 1-3. Stoplight drawn with re-used elements
Figure 1-4. Stoplight with gradient fills
Example 1-7. Using gradient fills to enhance a vector graphic stoplight
Figure 1-5. Three stages of an animated stoplight with gradient fills
Example 1-8. Animating the stoplight using CSS keyframes
Figure 1-6. Three stages of a labelled, animated stoplight
Example 1-9. Adding text labels to the animated stoplight
Figure 1-X1. A vector graphic rasterized at different resolutions

Online Extras#