Unlocking SVG’s Superpowers

on YouTube ↗45m

" summary

Explains concrete SVG techniques and where they actually help: using viewBox coordinates for responsive image grids, clipping images with SVG paths (and applying those clips to HTML elements by scaling the clip to 0–1), animating strokes with pathLength="1" for easy dash animations, and morphing shapes for mobile menus with morphing with GreenSock. Shows demos using webcam pixel averaging and the Chrome face API, uses foreignObject for accessible HTML inside SVG for readable infographics, warns that complex filters are slow and covers browser caveats like IE needing inline SVG and the clipPath on HTML with viewBox scaling trick.

AI-written summary · about

" chapters (10)

1. 0:00Introduction to SVG
2. 2:10Beyond simple illustrations
3. 8:43SVG as a structural tool
4. 13:45Layout and coordinate systems
5. 18:59Clipping and masking techniques
6. 24:35Animating SVG paths
7. 30:41Stroke animation techniques
8. 35:00Creating patterns
9. 37:16Mastering SVG filters
10. 41:52Accessibility with foreignObject

" related talks

• 34mThe svg of .svgSara Soueidan · Mirror Conf 2017
• 29mStyling and Animating Scalable Vector Graphics with CSSSara Soueidan · CSSconf EU 2014
• 22mSVG Can Do That?!Brenna O'Brien · CSSConf Oakland 2014
• 39mStyling and Animating Scalable Vector Graphics with CSSSara Soueidan · CSSConf US 2014
• 59mThe web design cheat code: Using SVG to bridge CSS’ gapsLea verou · Frontend United 2019
• 31mSurprise and delight: CSS + SVGChris Wright · CSSConf Australia 2014
• 30mDown the SVG Rabbit HoleRobyn Larsen · JSUnconf 2018
• 39mBuilding Better Interfaces With SVGSara Soueidan · CSSConf Australia 2015