Animation & Effects

on YouTube ↗07m

" summary

Claim: SVGs replace PNG icons with resolution‑independent vectors that reduce file size and enable per‑element DOM access, CSS styling, animations and XML filters. Evidence: browser support matrix (Chrome/Firefox/Opera full, IE9 with viewBox/width/height fixes, Android 4.4+ mostly OK), five methods of inclusion with pros/cons, and a demonstrated inline SVG preferred workflow to avoid extra network calls. Gotchas: inner‑element transforms are limited but solvable by splitting files; filters include specular lighting and Gaussian blur and interactive animations that work.

AI-written summary · about

" chapters (7)

1. 0:00Start
2. 0:25Resolution Agnostic
3. 2:04Cross Browser Support
4. 2:30XML Format
5. 3:01CSS Styling
6. 4:03Inclusion Methods
7. 6:02Animations & Effects

" related talks

• 22mSVG Can Do That?!Brenna O'Brien · CSSConf Oakland 2014
• 49mSVG in motionSara Soueidan · ffconf 2015
• 29mStyling and Animating Scalable Vector Graphics with CSSSara Soueidan · CSSconf EU 2014
• 30mDown the SVG Rabbit HoleRobyn Larsen · JSUnconf 2018
• 31mAnimating SVGsZell Liew · CSSConf.Asia 2015
• 31mAn SVG’s TaleElizabet Oliveira · <React.NotAConf /> 2019
• 36mInteractive Web Animation with SVGCassie Evans · beyond tellerrand Berlin 2019
• 31mSurprise and delight: CSS + SVGChris Wright · CSSConf Australia 2014