RESOURCES

I’ve sprinkled links to resources through this book, and I hope you’ve followed them as they’ve cropped up. This section lists documentation, texts, sites, and tools that I find particularly valuable, but that I didn’t explicitly cover in the book or explore in detail. Many of these resources have interactive elements—the web is perfect for that; books, not so much. Be sure to check out these gems:

  • “SVG,” Mozilla Developer Network. This is a directory page that links to hundreds of individual pages covering every SVG element, attribute, DOM interface, effect, and much more. It is likely the most comprehensive resource on SVG (http://bkaprt.com/psvg/11-01/).
  • “A Complete Guide to SVG Fallbacks,” Amelia Bellamy-Royds. This covers every possible scenario of SVG usage and browsers that don’t support it (http://bkaprt.com/psvg/11-02/).
  • “SVG on the Web – A Practical Guide,” Jake Giltsoff. A long-form, open-source reference guide that lists quite a few resources as well (svgontheweb.com).
  • “Inline SVG vs Icon Fonts [CAGEMATCH],” by me. My complete, point-by-point analysis compares the two most popular techniques for icon systems (http://bkaprt.com/psvg/03-06/).
  • “Ten Reasons We Switched from an Icon Font to SVG,” Ian Feather. Ian’s rationale for moving to an SVG icon system on Lonely Planet influenced my own thinking (http://bkaprt.com/psvg/04-06/).
  • “Use SVG for Icons,” Pete LePage. If you aren’t convinced by lone developers’ opinions, perhaps you’ll like the official advice from Google (http://bkaprt.com/psvg/11-03/).
  • IcoMoon: An interactive tool for building SVG sprites for use as an icon system. One of the longest-running and best tools for the job (http://bkaprt.com/psvg/04-01/).
  • Grunticon: Perhaps the most popular SVG-based icon system tool, Grunticon generates a conditionally-loaded CSS file where each icon is converted into a class that applies a data URL background-image of that icon (http://bkaprt.com/psvg/11-04/).
  • grunt-svgstore: Fabrice Weinburg’s grunt plugin combines multiple SVG files into a single sprite. I dreamed up the idea for a tool like this; Weinburg built what I believe is the first of its kind (http://bkaprt.com/psvg/04-03/).
  • gulp-svg-sprite: The Gulp equivalent of Weinburg’s plugin, by Joschi Kuphal (http://bkaprt.com/psvg/11-05/).
  • “Understanding SVG Coordinate Systems and Transformations,” Sara Soueidan. Sara has done lots of SVG evangelism. This article is among many of hers that plumb one aspect of SVG deeply; it includes an interactive exploration tool (http://bkaprt.com/psvg/11-06/).
  • Scalable Vector Graphics (SVG) 1.1**:** This is the official specification for SVG by the W3C (http://bkaprt.com/psvg/11-07/).
  • Scalable Vector Graphics (SVG) 2. Like any good new specification, this draft specification for the upcoming version of SVG “adds new features commonly requested by authors.” I know I’m excited for things like wrapping text (http://bkaprt.com/psvg/11-08/).
  • “Bespoke SVG Reference,” Chris Nager. The discovery that path is the ultimate SVG shape element—all shapes are ultimately drawn with it—was a real eye-opener for me. The path syntax may look a bit strange, but Nager breaks down how simple it actually is (http://bkaprt.com/psvg/11-09/).
  • SVGeneration: This interactive tool does a wonderful job of showing off interesting SVG design possibilities generated from very little code (svgeneration.com).
  • SVG Fancy Town: This is my personal collection of SVG demos that I find particularly impressive (http://bkaprt.com/psvg/11-10/).
  • “The Image That Called Me,” Mario Heiderich. This is probably the most widely cited text regarding SVG and security. A lot of the danger boils down to the fact that SVG is XML-based and can contain JavaScript, which makes it an XSS concern (http://bkaprt.com/psvg/11-11/, PDF).
  • “Tips for Creating Accessible SVG,” LĂ©onie Watson. A classic article on how to structure SVG to be accessible (http://bkaprt.com/psvg/09-07/).
  • Can I Use
: This is the most popular site for tracking browser support of browser features, including SVG. Admirably, the site doesn’t track SVG as a blanket “yes or no” in terms of support, but looks at individual SVG features and partial support levels of those features (http://bkaprt.com/psvg/11-12/).
  • “You Don't Know SVG,” Dmitry Baranovskiy. A video of a talk bursting with SVG possibilities (http://bkaprt.com/psvg/11-13/).
  • SVG Weirdness: This GitHub repo organized by Emil Björklund tracks unexpected cross-browser bugs in SVG (http://bkaprt.com/psvg/11-14/).
  • Chromium Bug Tracker: A collection of SVG bugs reported to the Chromium project (http://bkaprt.com/psvg/11-15/).
  • Bugzilla: A collection of SVG bugs reported to the Mozilla project (http://bkaprt.com/psvg/11-16/).