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.

The book Using SVG with CSS3 and HTML5 is a guide to scalable vector graphics in web sites: how they should work, how they do work, and how to work around the parts that don't work.

It's a big topic, and we couldn't fit everything we wanted to say in the book. This website compiles this additional material, while also making it easier to explore the code we used for the examples and figures.

Read more about the book on the O’Reilly Media catalogue page. E-books and paper copies can be purchased from most retailers of technical books (or books in general); it is also included in O’Reilly's Safari online subscription service.

The files are covered by the O’Reilly Media policy on the use of example code. Short version: you are free to use the examples in moderation; credit is appreciated but not required. However, please don't integrate a large portion of the example set within a product or documentation. All the fonts and some image files are content owned by others; see the credits in the book—most are public domain or Creative Commons-licenced.

If you notice a problem, file a GitHub issue or ping Amelia on Twitter.

Chapters#

Read a summary of each chapter, and find the code for each example and figure:

  1. Part I: SVG on the Web

    1. Graphics from Vectors: An Overview of SVG
    2. The Big Picture: SVG and the Web
    3. A Sense of Style: Working with CSS
    4. Tools of the Trade: Software and Sources to Make SVG Easier

  2. Part II. Drawing with Markup

    1. Building Blocks: Basic Shapes
    2. Following Your Own Path: Custom Shapes
    3. The Art of the Word: Graphical Text Layout and Fonts

  3. Part III. Putting Graphics in Their Place

    1. Scaling Up: Defining Coordinate Systems
    2. A New Point of View: Cropping Embedded SVG Files
    3. Seeing Double: Re-using Content
    4. Transformative Changes: Coordinate System Transformations

  4. Part IV. Artistic Touches

    1. Filling Up To Full: The fill Property, Gradients, & Patterns
    2. Drawing the Lines: Stroke Effects
    3. Marking the Way: Line Markers
    4. Less Is More: Clipping and Masking
    5. Playing with Pixels: Filters and Blend Modes

  5. Part V. SVG as an Application

    1. Beyond the Visible: Metadata for Accessibility and Added Functionality
    2. Drawing on Demand: Interactive SVG
    3. Transitioning in Time: Animation
    4. Good Manners: Best Practices for SVG

SVG Reference Guides#

Quick references to SVG syntax:

Extra Articles and Examples#

Additional tutorials and explanations that we couldn't fit in the book are in the Online Extras section; they are also listed in the relevant chapter pages.

About the Authors#

Where to find out more about what we do: