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 2
The Big Picture: SVG and the Web

As with HTML, CSS, and the other standards that make up the web, the development of SVG has been a process of back-and-forth compromises between the authors of specifications, the builders of web browsers that implement them, and the designers of web pages that use them. Unlike those other languages, however, the SVG specification did not develop slowly and incrementally—​it was created fully formed, as an incredibly complex graphics language.

If you work with HTML and CSS web design, you will find many aspects of SVG familiar—​and a few quite different. The SVG standard was built upon other web standards, most notably XML and CSS, and has a complex DOM that can be manipulated with JavaScript. In that way, it is very similar to HTML. But because the primary focus of SVG is graphics, not text, it intersects and connects the parts of the web platform that you usually try to keep separate: content, formatting, and functionality.

This chapter starts with a refresher about the main web languages and their separate roles. It then looks at how SVG interacts with these languages. We adapt the stoplight example from Chapter 1 to show how you can build on a simple SVG to create complete web pages.

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 2-1. Timeline of web platform standards.

Solid arrows indicate direct extensions of existing standards; dashed arrows represent more indirect inspiration. Specifications that were abandoned, such as SVG 1.2 or ECMAScript (ES) 4, are not included.

Example 2-1. Adding scripts to a standalone SVG file
  • Live SVG file, sample-scripts.svg (Note: this file is a blank page; it doesn't actually do or draw anything. But it also doesn't show XML errors, which was the point of the example!)
Example 2-2. Using JavaScript to animate an SVG stoplight
Figure 2-2. Sample web page using an SVG image file
Example 2-3. CSS-animated stoplight as an image in a web page
Figure 2-3. A web page using inline SVG to enhance form validation feedback
Example 2-4. Controlling inline SVG with HTML form validation and CSS pseudoclasses
Example 2-5. CSS stylesheet for the code in Example 2-4
Figure 2-X1. The core web platform languages, their roles and their areas of overlap.

Web pages and web sites exist at the intersection of all four regions.

Online Extras#