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.
See Optimizing SVGs in data-URIs and Probably Don’t Base64 SVG for more details.
Supported by all major browsers, including IE9+, see CSS background-image support table.
Social links and email client: