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.

Visit my SVG encoder here.

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!

Leave a Reply

Your email address will not be published. Required fields are marked *