We’ve spent a lot of time talking about using inline <svg> and the <use> element. You can build an icon system with that that is rife with advantages.
You can create an SVG icon system though in other ways. You could lay out a traditional gridded sprite sheet in SVG and do background-position sprites like we used to do with raster images. In the future you’ll be able to use fragment identifiers, so that even gets a little easier. More information on these things.
Another way is to embed data URI’s of the SVG image right into a CSS file. That is the approach that Grunticon takes.
Grunticon is a Grunt plugin for automating an SVG icon system. It takes a folder full of SVG and processes them into a CSS file. There are a bunch of selectors in there, based on the file names of the SVG images, that have a background-image of the SVG data URI (not Base64 though).
Doing it this way means you get the scalability of SVG and file size benefits, but that’s about it. Still, often that’s all you need.
Perhaps the best part about Grunticon though, is that it gives you everything necessary for fallbacks. This includes an alternate stylesheet for data URI PNG’s and even individual PNGs themselves (which it creates for you). Plus, a script you use on your page to determine support and only load the appropriate stylesheet.
I think it’s fair to say that this makes fallbacks easier to handle than the defs/<use> technique, for now. Not that it’s impossible.
Grumpicon is an in-browser version of Grunticon, that we used in this screencast.
Grunticon is, as I write this, working on a way to progressively enhance up to embedded inline SVG, which would be pretty cool!
