SVG to CSS background-image conversion
Output SVGs as CSS background-images
Compress the SVG first
Always compress SVGs before running in production. Remove the surplus Illustrator code, simplify the structure and reduce the decimal places used. Personally I use SVGOMG.
Why use SVG URI instead of SVG data-URI?
Embedding SVG URIs into the CSS is the currently preferred method because:
- The SVG remains hand editable in the style sheet.
- The SVG URI has a smaller footprint, theoretically up to 25% less code a than in data-URI format.
- SVG URIs also achieve better gzip compression than their data URI equivalents.
- The CSS file is cacheable.
All major browsers support this method, including IE9+, see CSS background-image support table.
Legacy browser support
If you’re still supporting legacy Internet Explorer version 6 – 8 I suggest creating a second style sheet which contains image references and placing the link inside a conditional comment.
The style sheet should contain the same class reference as the main sheet but point to a PNG version. For example:
If you’re only supporting IE 8 then you could always data-URI them too, but that seems a little excessive to me.