Styling and Animating Scalable Vector Graphics with CSS
summary
Notes are concrete not generic: recommends cleaning output with svgo or Peter’s online optimizer, uses the padding hack plus viewBox to make SVGs responsive, and uses getTotalLength() to animate stroke-draw effects. Embedding choices matter: <img> and CSS backgrounds strip CSS animations while animateTransform and object/inline embedding preserve SVG animations. Mentions transform‑origin bugs and lack of Chrome hardware acceleration, and cites a real win: GIFs to animated SVGs cut 1.6 MB → 389 KB and 8.75 s → 412 ms.
AI-written summary · about
chapters (6)
- 0:00Introduction
- 8:34Presentation Attributes
- 19:20Responsive SVG
- 25:20SVG Transformations
- 30:20SVG Paths
- 35:08Morphing Paths
