Design the Web: SVG Rollovers with CSS
23mIntermediate2014-08-11
Authors
Chris Converse
Applies design and UX principles to technology
Course details
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.
Skills covered
Web GraphicsCSSWeb StandardsWeb DesignFront-End Web DevelopmentLimited SeriesWeb DevelopmentOpen Source
Concepts
Introduction
- Preview the final project
- About the exercise files
Responsive Design, Custom Scripts, and Scroll Detection
- Options for combining CSS with SVG
- Moving SVG inline with HTML
- Adding classes to SVG elements
- Combining CSS hover states with SVG
- Grouping SVG elements
- Controlling grouped SVG elements with CSS