The mother lode
A super comprehensive list of SVG articles. These were the most helpful to me:
- Practical SVG from A Book Apart. Written by Chris Coyier (CSS Tricks).
- CSS Tricks — Using SVG 2013–03–05
- svgontheweb.com by Jake Giltsoff. A well-written guide to SVG basics, embedding techniques, and CSS styling.
SVG deep dive
- Sara Soueidan — Structuring, grouping, and referencing in SVG 2014–07–03
- Sara Soueidan — Understanding SVG coordinate systems and transformations (part 1) — The viewport, viewBox, and preserveAspectRatio 2014–07–17
- Sara Soueidan — Understanding SVG coordinate systems and transformations (part 2) — The transform attribute 2014–07–30
- Sara Soueidan — Understanding SVG coordinate systems and transformations (part 3) — Establishing new viewports 2014–08–05
Icon systems and sprites
- CSS Tricks — Icon system with SVG sprites 2014–03–12
- CSS Tricks — SVG ‘symbol’ a good choice for icons 2014–06–03
- CSS Tricks — SVG ‘use’ with external source 2014–05–23
- Sara Soueidan — An overview of SVG sprite creation techniques (24 Ways) 2014–12–16
- David Bushell — Use SVG (part 2) 2015–01–30
- CSS Tricks — SVG ‘use’ with external reference, take 2 2015–09–23
- Ian Feather — Ten reasons we switched from an icon font to SVG 2014–01–03
- Clour Four — Our SVG icon process 2016–02–02
- GitHub — Delivering Octicons with SVG 2016–02–22
- LiquidLight — Creating SVG sprites using Gulp and Sass 2016–03–15
- Una Kravets — A Gulp-Based external SVG symbol sprite icon system 2016–01–26
Styling and animating via CSS
- Sara Soueidan — Styling and animation SVGs with CSS (Smashing Magazine) 2014–11–03
- Sara Soueidan — Styling SVG (Codrops) 2015–07–16
- Lotte Jackson — Inline SVG spriting and currentColor 2016–08–05
- Frontend Center — Why inline SVS is best SVG — Animating lines with
stroke-dashoffset(video from 8:15)
- Léonie Watson — Using ARIA to enhance SVG accessibility 2013–12–19
- Léonie Watson — Tips for creating accessible SVG 2014–05–06
- CSS Tricks — Accessible SVGs 2016–07–06
- GitHub Gist — Accessible SVG sprite icons
- Use inline SVG so assistive tech (AT) can access it.
- Provide a
<svg aria-labelledby="xyz">for broader support (requires
<svg role="img">for content images.
Exceptions for icons
<svg aria-hidden="true" role="presentation">if adjacent text is readable by AT.
<title>if no accompanying text is present (also
Optimization and performance
- Sara Soueidan — Tips for optimizing SVG delivery for the web 2014–12–19
- CSS Tricks — AJAXing for your SVG sprite 2015–01–05
- Sara Soueidan — Tips for creating and exporting better SVGs for the web 2015–11–16
- svgOMG — Drag/drop an SVG onto the browser to optimize it.
- svg4everybody — Make IE understand
<use>with external SVGs
- gulp-imagemin — Optimize SVG files (and GIF/JPG/PNG) using svgo.
- gulp-svg-sprite — Combine SVG files into a
<view>sprite sheet (see: config builder) and optimize.