Smart SVGs: transforming the future of graphics
summary
Smart SVGs are single dynamic SVG files that use browser media queries and patent‑pending techniques to switch layouts, colors and semantics based on OS contrast or dark mode settings, deliver live selectable text and keyboard navigation, and remain screen‑reader friendly and indexable. A demo replaced a 15‑logo infographic with a 61 KB Smart SVG, often replacing a dozen images and producing assets as small as 7 kilobytes or even 340 bytes, cutting load time, data transfer and energy use across browsers.
AI-written summary · about
chapters (21)
- 0:00Welcome
- 1:06Speaker introduction
- 3:57Image types: vector vs raster
- 6:12What are SVGs
- 7:40Dark mode and contrast
- 10:15Contrast challenges
- 11:39Workflow inefficiencies
- 12:47Smart SVGs introduction
- 14:33Smart SVGs and media queries
- 14:54UX benefits of Smart SVGs
- 15:38Designing Smart SVGs
- 16:24Engineering Smart SVGs to WCAG AAA
- 17:29Smart SVGs and reader mode
- 18:34Optimizing Smart SVGs
- 19:37Accessible animation
- 20:40Case study: Atos Group
- 27:12Atos infographic timeline
- 32:14SVGs and accessibility standards
- 32:34Benefits of Smart SVGs
- 33:39SVGs as sustainable graphics
- 35:32Q&A
