CSS-Tricks has two great articles on SVG spriting: Icon System with SVG Sprites and SVG symbol a Good Choice for Icons

My online application uses PNG sprites, and it's a pain to maintain, if we wanted to add or remove an icon. Plus anyone who wants to skin the application would have to get the original Illustrator files, fill with a new color, and output a new PNG. SVG with symbols seems to be the better way to take care of it, where one could link directly to a symbol and get the icon they need.

Unfortunately, the article about using sprites doesn't talk about symbols, and the article about symbols relies on embedded SVG in order to render the icon they need. Here I had gone through all the steps outlined to get a composite SVG file of all the icons, segregated out into their own symbols, and nothing to do with it. Replacing all my icons, which are in CSS, with explicit SVG is not an option.

Unfortunately, when I tried to link to the symbols, all I got was a blank spot. Here's an example. The SVG contains two symbols.

Notice that, if you go straight to the SVG file, it just renders into a blank page.

I did find an example that worked online. When I examined the differences between his SVG file and mine, I noticed that he had some extra code: views with ids, and use tags with ids as well; the CSS-Tricks symbol article had the use tags embedded in the HTML, and it didn't occur to me that it could also be embedded in the SVG file.

So I tried adding view and use to my SVG, but Firefox choked on it. Apparently there's an "xmlns:xlink" attribute that needed to be added to the SVG tag.

Now it works:

Unfortunately after all that work, I found out that the article with the working example only works in Firefox, and so does mine. I'll just have to wait till Chrome catches up with reality.