No images? Click here

Use CSS with SVG

We're all used to using CSS with HTML, but did you know that you can also use CSS withScalable Vector Graphics (SVG)? SVG is a markup format for describing flat, two-dimensional images. Because it’s a markup language, it has a Document Object Model, and so you can use CSS to work with SVG images. This means that you can, for example, change the appearance of SVG images based on user interaction. Or you can use the same SVG document in multiple places, and show or hide portions of it based on the width of the viewport.

In Chapter 9 of CSS Master, 2nd Edition, Tiffany B. Brown provides in-depth coverage of how to use CSS with SVG. Topics covered the advatages of using vector images, how to style SVG images with CSS, choosing a good font loading strategy, embracing CSS animations, animating and trasitioning SVG properties, using SVG with media queries, and more. You;ll discover that using SVG with CSS gives us more possibilities for flexible and adaptive documents.

CSS Master, 2nd Edition

Keep ahead of the game by employing the most effective, cutting-edge CSS techniques. Create efficient, maintainable code, employ advanced layouts, and design innovative visuals with powerful effects, transitions, filters, SVGs, and animations.

Start your subscription today and you'll get access to this book, plus 300+ other web design and development books in SitePoint Premium!

This week, new subscribers can get 60% off for the first three months. That’s $3 a month to access 400+ tech books and courses — grab the deal here.

Until next time,
James at SitePoint