Let's modify our SVGs with CSS
summary
Shows how to optimize SVG files with svgo/svgomg and embed them inline so CSS can target elements to change fill and stroke, then animate outlines using stroke-dasharray and stroke-dashoffset without JavaScript. Notes limitations: CSS cannot modify path (d) data, transform-origin is relative to the SVG canvas top-left, shadows require SVG filters, and complex morphing or path edits need JS libraries like Snap.svg; includes runnable, performant examples.
AI-written summary · about
chapters (11)
- 0:00Introduction
- 1:28SVGs and why use them
- 3:38Creating optimized SVGs
- 7:10Inserting SVGs
- 8:37Customizing SVGs with CSS
- 12:13CSS properties for SVGs
- 13:39Animating SVGs with CSS
- 16:56CSS transforms in SVG
- 19:22SVG shadows and filters
- 22:14JavaScript limits and fixes
- 24:45Recommended SVG libraries
related talks
29mStyling and Animating Scalable Vector Graphics with CSS
39mStyling and Animating Scalable Vector Graphics with CSS
22mSVG Can Do That?!
31mAnimating SVGs
52mCSS and SVG — The Dynamic Duo!
30mDown the SVG Rabbit Hole
31mSurprise and delight: CSS + SVG
59mThe web design cheat code: Using SVG to bridge CSS’ gaps