SVG Will Save Us
summary
Shows concrete wins: an interactive demo at 2 KB gzipped, a loader shrunk to 6 KB gzipped, and a complex animation at ~19 KB. Demonstrates converting a 40 KB PNG into a 25 KB inline SVG (and shrinking a 38 KB asset to 16 KB), using Illustrator image-trace + simplify-path (1455 → 800 points), and running animations with requestAnimationFrame, masks and timelines. Covers accessibility patterns (role=presentation, title with aria-labelledby), currentColor for theming, and integration with Vue.js and React plus optimization with SVG OMG.
AI-written summary · about
chapters (25)
- 0:00Intro
- 0:50SVG is a total party
- 1:30SVG can be tiny
- 2:40What is SVG
- 3:10Coordinate Points
- 3:55Raster vs Vector
- 4:54SVG DOM
- 6:40Curved Path Points
- 7:32Pen Demo
- 8:13Code Size
- 8:29Loaders
- 9:12Animations
- 9:48SVG JPEG
- 10:27Time is Money
- 11:13Demo
- 19:55Simplify Path Points
- 20:50Reduce HTTP Requests
- 21:20SVG to Rule
- 21:55Why SVG
- 24:55SVG Icons
- 31:05Making SVG Icons
- 33:25SVG DOM Stability
- 33:54Advanced Type Lockups
- 34:57SVG for Layout
- 35:42Book
