CSS and SVG — The Dynamic Duo!

on YouTube ↗52m

" summary

Shows what actually works and how: CSS animations on SVG properties and transitions, using CSS variables to theme reusable icons, and applying SVG-defined filters masks and clip-paths from CSS; demonstrates three embed modes and their limits — SVG as image (no scripting no external resources text not selectable), inline SVG (single DOM events bubble best for accessibility) — and warns that browser bugs still require extensive testing.

AI-written summary · about

" chapters (11)

1. 0:00Intro
2. 3:38Enter SVG
3. 8:32CSS and SVG
4. 16:38CSS Special Skills
5. 25:27CSS Styling SVG
6. 30:46SVG as Image
7. 37:07SVG as Embedded Object
8. 40:33Inline SVG
9. 42:57Demos
10. 45:32Hero Text
11. 47:53Media Queries

" related talks

• 31mSurprise and delight: CSS + SVGChris Wright · CSSConf Australia 2014
• 04mSVG & CSSJérémie Patonnier · dotCSS 2019
• 49mSVG in motionSara Soueidan · ffconf 2015
• 59mThe web design cheat code: Using SVG to bridge CSS’ gapsLea verou · Frontend United 2019
• 39mBuilding Better Interfaces With SVGSara Soueidan · CSSConf Australia 2015
• 29mStyling and Animating Scalable Vector Graphics with CSSSara Soueidan · CSSconf EU 2014
• 39mStyling and Animating Scalable Vector Graphics with CSSSara Soueidan · CSSConf US 2014
• 24mBreaking the norm with creative CSSAga Naplocha · Frontend United 2018