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.
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, animated-stoplight-scripted.svg (script applied to the basic stoplight)
- Live SVG file, labelled-stoplight-scripted.svg (the same script applied to the labelled stoplight)
- Live SVG file, transformed-labelled-stoplight-scripted.svg (and just for fun, another one with gratuitous SVG/SMIL animations, which didn't end up in the book)
- Figure 2-2. Sample web page using an SVG image file
- Example 2-3. CSS-animated stoplight as an image in a web page
- Live HTML file, svg-as-image.html
- PNG screenshot, svg-as-image.png
- Live HTML file,
svg-as-picture.html (a variation using a
<picture>to include a fallback PNG for older browsers)
- Live HTML file,
svg-as-object.html (a variation using an
<object>instead, so it can embed the scripted version of the animation)
- 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.