I use SVGs quite a bit in my projects for elements like logos, icons, spinners/loaders basically anything I can get away with. When using them in my CSS as background images, there are a couple of things to note, which caused me some head-scratching, and slightly slows down my build process:
- Internet Explorer (what else?) gets a bit picky about having single quotes used in the CSS background image selectors.
- Unencoded SVGs cause problems in CSS as well (I think this issue is a bit wider than just IE).
- I have to set a primary colour for the SVG in the code which can be a bit fiddly.
Ok, so none of these things are show-stoppers, but all those extra seconds add up.
My solution
Up until now I have been importing an SVG into a text editor, running a search/replace on changing all the double quotes into single quotes, then using a URL encoder tool like the very handy Meyerweb Dencoder (thanks!).
But why do something in two steps what you can do it in one?! I have built my own encoding tool, but with the added bonuses of handling double quotes for IE, and removing all the guff before the opening <svg> tag.
My future development/roadmap for this tool is to include a js colour-picker so you can choose your own colours for the SVG before encoding.
Have you got any suggestions for improvements? Let me know in the comments!