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.

Online Extras

These online extras were originally written to be part of Using SVG with CSS3 and HTML5, but were cut during editing. Which isn't to say that these are the cheap cuts—far from it! Some of our favorite examples are here. In many cases, these sections were extracted because they are complete articles that can stand on their own.

The printed book is just over 800 pages long, with 20 chapters, 115 complete examples (and numerous short code snippets), 189 figures, and 141 browser support warnings.

But it still didn't include everything we wanted to say.

Some of these are extra explanation of the concepts and connections. Some are extended tangents about browser bugs and work-arounds. And many are just interesting applications of SVG on the web.

You'll find the example files for the extras in the same folders in the Github repo as the files for the chapter they're associated with.

Extras, by Chapter#

  1. Graphics from Vectors: An Overview of SVG
  2. The Big Picture: SVG and the Web
    • “The Web Platform”: The web platform is the interconnected set of standards used by websites and browsers: HTML, CSS, HTTP, URLs, JavaScript, the DOM. And SVG.
  3. A Sense of Style: Working with CSS
    • “The Cascade”: The CSS cascade mostly works the same for SVG as for HTML. But that doesn't mean that it is simple.
    • “Media Queries in Embedded Versus Inline SVG”: Media queries can be used with inline SVG and in standalone SVG files. But if you switch between the two, you’ll often need to make adjustments.
    • “XML Namespaces in CSS”: You can usually ignore XML namespaces when writing CSS selectors, but that makes it all the more surprising when they cause a problem.
  4. Tools of the Trade: Software and Sources to Make SVG Easier
    • “SVG Snapshots: Converting Vector to Raster”: Sometimes, you need a “snapshot” image of an SVG, saved in a common raster (aka, bitmap) image format, such as PNG or JPEG. The conversion can often be automated using dedicated rasterization tools.
  5. Building Blocks: Basic Shapes
    • “Perplexing Percentages”: Most SVG lengths are proportional to the viewBox width or height. But some values aren't either horizontal or vertical.
  6. Following Your Own Path: Custom Shapes
  7. The Art of the Word: Graphical Text Layout and Fonts
  8. Scaling Up: Defining Coordinate Systems
  9. A New Point of View: Cropping Embedded SVG Files
    • “Picking the Perfect View”: SVG views and the HTML <picture> element are a responsive design power team, letting you crop an embedded graphic based on media queries.
  10. Seeing Double: Re-using Content
    • “Understanding CORS and SVG”: Why doesn't it just work? Cross-origin services and static asset servers are part of modern web development, but they can be a headache for SVG.
    • “Importing SVG Assets, with AJAX”: Browser support limitations can restrict your ability to share SVG assets between web pages. A little JavaScript can patch the gaps.
  11. Transformative Changes: Coordinate System Transformations
  12. Filling Up To Full: The fill Property, Gradients, & Patterns
  13. Drawing the Lines: Stroke Effects
    • “Drawing with Dashes”: SVG's stroke-dasharray property was designed for dotted lines, but when animated it creates a shape that draws itself.
  14. Marking the Way: Line Markers
  15. Less Is More: Clipping and Masking
  16. Playing with Pixels: Filters and Blend Modes
    • “Making the Wave”: SVG <feTurbulence> and <feDisplacementMap> create wave-like distortion effects from mathematical parameters. What do the numbers mean?
  17. Beyond the Visible: Metadata for Accessibility and Added Functionality
    • (none)
  18. Drawing on Demand: Interactive SVG
  19. Transitioning in Time: Animation
  20. Good Manners: Best Practices for SVG
    • (none)