Using SVG with CSS3 and HTML5: Vector Graphics for Web Design

Unlike other image formats, SVG can be an interactive part of your web site, integrated in HTML5 markup or created dynamically using JavaScript. It can be styled by CSS to instantly adapt to changes in your site’s design. Flexible metadata options can make the graphics accessible to screen readers and search engines. And it is always displayed at the highest resolution possible, without requiring larger file sizes, making it ideal for both widescreen desktop displays and Retina mobile devices.

Using SVG with CSS3 and HTML5 starts with the basics, explaining how simple shapes and icons are defined in SVG, and then builds upon that foundation to create complex graphics and interactive, animated applications. It covers all the features you’re likely to come across in web design, while avoiding areas with poor browser support.

Table of Contents

Chapter 1 Graphics from Vectors
Chapter 2 The Big Picture
Chapter 3 A Sense of Style
Chapter 4 Tools of the Trade
Chapter 5 Building Blocks
Chapter 6 Following Your Own Path
Chapter 7 The Art of the Word
Chapter 8 Scaling Up
Chapter 9 A New Point of View
Chapter 10 Seeing Double
Chapter 11 Transformative Changes
Chapter 12 Coloring the Shapes
Chapter 13 Drawing the Lines
Chapter 14 Marking the Way
Chapter 15 Layered Looks
Chapter 16 Less Is More
Chapter 17 Playing with Pixels
Chapter 18 Beyond the Visible
Chapter 19 Drawing on Demand
Chapter 20 Good Manners
Appendix A SVG Style Properties