03 March 2015
I wrote a post over at Lincoln Loop recently on using SVG sprites as an icon system: SVG Sprites and Icon Systems Are Super. The post was a response to an email I received asking about how to use a lot of SVG icons and be able to change their colors with CSS, but also not have all that markup that goes along with inline SVG.
The problem, as I understand it, is that he needs access to the SVG’s “innards” to be able to change the fill color, and therefore not having to include twice as many icons as you would have to do with images but also not have bunches of inline SVG code sitting around.
When you use an SVG as an img you cannot then go “in” to the SVG and change its fill or stroke with CSS.
This would very quickly prove frustrating and inefficient when working with so many icons. Accessing the fill of these icons to change the palette for color blind users, for example, would be impossible and you would therefore need additional images.
In the response post I proposed using SVG sprites, which is something I read all about last year on CSS-Tricks. It’s super clever and really results in the best of both worlds between using an img (less markup!) and inline SVG (complete control!).
