The Circle is (almost) Complete - SVG & CSS
summary
Practical cookbook of what actually changes exported SVG files and what makes them useful: use Adobe Illustrator with RGB artboard, merge shapes, avoid strokes and filters, reduce decimals to one to cut file size, strip width/height and unnecessary ids, and keep text as text when readability matters. CSS works inside SVG including inline style tag with media queries and transitions but interactivity breaks if the SVG is used as an <img>. Browser gaps for filters are solved by SVG filters via tiny color matrix for Firefox while IE support remains limited.
AI-written summary · about
chapters (13)
- 0:00Start
- 3:15Adobe Illustrator Work for Svg Production
- 7:34Css To Create Backgrounds
- 7:46Merge Shapes
- 13:58Group Transforms
- 15:02Embedded Style Tag
- 19:21Css3 Applied to Svg
- 22:06Svg Filters
- 26:15Blur
- 27:03Image Maps
- 27:45Animated Measurements
- 29:47Css Spec for Gradients
- 30:03Animation Gradients
related talks
05mWill You Help Me End Pixelated Images on the Internet
52mCSS and SVG — The Dynamic Duo!
29mStyling and Animating Scalable Vector Graphics with CSS
39mThe [svg] of .svg
45mUnlocking SVG’s Superpowers
27mLet's modify our SVGs with CSS
45mSVG Lessons I Learned The Hard Way
42mBreaking the norm with creative CSS