The mother lode

• CSS Tricks — A Compendium of SVG Information

A super comprehensive list of SVG articles. These were the most helpful to me:

Books

• Practical SVG from A Book Apart. Written by Chris Coyier (CSS Tricks).

SVG basics

• 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

Fallbacks

• CSS Tricks — A complete guide to SVG fallbacks 2015–05–04

Fragment identifiers

• CSS Tricks — How SVG fragment identifiers work 2014–11–03

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

Implementations

• 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 content with CSS (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-dasharray and stroke-dashoffset (video from 8:15)

Accessibility

• 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

Summary

1. Use inline SVG so assistive tech (AT) can access it.
2. Provide a <title> (equivalent to <img alt="">).
3. Use <svg aria-labelledby="xyz"> for broader support (requires <title id="xyz">).
4. Use <svg role="img"> for content images.

Exceptions for icons

1. Use <svg aria-hidden="true" role="presentation"> if adjacent text is readable by AT.
2. Use <title> if no accompanying text is present (also aria-labelledby).

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

Tools

Optimize

• svgOMG — Drag/drop an SVG onto the browser to optimize it.

Polyfills

• svg4everybody — Make IE understand <use> with external SVGs

Gulp build

• gulp-imagemin — Optimize SVG files (and GIF/JPG/PNG) using svgo.
• gulp-svg-sprite — Combine SVG files into a <symbol> or <view> sprite sheet (see: config builder) and optimize.

Browser support

• Can I Use — SVG
• Can I Use — SVG fragment identifiers