Design the Web: SVG Rollovers with CSS

with Chris Converse
please wait ...
Design the Web: SVG Rollovers with CSS
Video duration: 0s 23m 47s Beginner


Learn how to change the color and visibility of SVG graphics with CSS. In this installment of Design the Web, author Chris Converse shows how to control the properties of SVG elements with external CSS, and make your graphics update on rollover. Plus, learn how to group multiple SVG graphics and control them with a single rollover state. The exercise files for this course are free to all members, so dive in and start following along now.


Preview the final project

- [Voiceover] Hi, I'm Chris Converse, and in this course, I'm going to show you how to stylize SVG elements with external CSS rules, as well as change SVG properties with external CSS. We'll also activate rollover states on individual SVG elements, as well as covering SVG's grouping capability, which will allow us to group together multiple items and control all of those with a single rollover. The exercise files for this course are available to all member of the Online Training Library, and they include an HTML file as well as an SVG file. And when you complete this course, you're project will work in all modern desktop web browsers.

So download the free files, and let's get started.

please wait ...