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.
Read a summary of each chapter, and find the code for each example and figure:
Part I: SVG on the Web
- Graphics from Vectors: An Overview of SVG
- The Big Picture: SVG and the Web
- A Sense of Style: Working with CSS
- Tools of the Trade: Software and Sources to Make SVG Easier
Part II. Drawing with Markup
- Building Blocks: Basic Shapes
- Following Your Own Path: Custom Shapes
- The Art of the Word: Graphical Text Layout and Fonts
Part III. Putting Graphics in Their Place
- Scaling Up: Defining Coordinate Systems
- A New Point of View: Cropping Embedded SVG Files
- Seeing Double: Re-using Content
- Transformative Changes: Coordinate System Transformations
Part IV. Artistic Touches
- Filling Up To Full: The fill Property, Gradients, & Patterns
- Drawing the Lines: Stroke Effects
- Marking the Way: Line Markers
- Less Is More: Clipping and Masking
- Playing with Pixels: Filters and Blend Modes
Part V. SVG as an Application
- Beyond the Visible: Metadata for Accessibility and Added Functionality
- Drawing on Demand: Interactive SVG
- Transitioning in Time: Animation
- Good Manners: Best Practices for SVG
SVG Reference Guides#
Quick references to SVG syntax:
- SVG Elements and Attributes
- SVG Style Properties
- Embedding SVG in HTML
- Select SVG DOM Methods and Objects
- Units for Measurements
- Path commands
- Transform Functions
- CSS Shape Functions
- Shorthand Filter Functions
- Blend Modes
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:
Amelia Bellamy-Royds writes about web development, contributes to web standards creation, and sometimes even builds websites.
Kurt Cagle works as a data architect, with an interest in data semantics (structured meaning) and machine learning.
- Twitter @kurt_cagle
Dudley Storey teaches college students how to build websites, and shares his examples and tutorials with other web developers through his website, The New Code.