SVG in motion
summary
Explains concrete choices: use inline SVG for DOM interactions, or object tag fallback / IMG or picture or CSS background when interactivity isn’t needed; optimization tools frequently break animation-ready IDs and groups so hand-edit before minifying. Recommends JavaScript for serious animation (Snap.svg, Velocity, GSAP-like timeline control) because CSS/SMIL can’t animate the d attribute or reliably handle morphs; shows sprite frames animated with steps and path reveal via stroke-dasharray/stroke-dashoffset and viewBox switching for responsive scenes.
AI-written summary · about
chapters (10)
- 0:00Introduction to SVG
- 2:20When and why to use SVG
- 7:27SVG embedding and fallback
- 17:44SVG animation techniques
- 21:03CSS animation and bugs
- 26:16Sprite animations
- 30:16Concurrent frame animations
- 34:06Responsive SVG with viewbox
- 42:12JavaScript animation libraries
- 46:15Line drawing animations
