Skip to main content

Reformat SVG images to URIs for use as, cross-browser, CSS background-images in your stylesheet.

- (update: )

SVG to CSS background-image conversion

Output SVGs as CSS background-images

Generated CSS:

    

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.

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.

Language markup
<!--[if lt IE 9]>
  <link rel=stylesheet href="replacement-images-for-old-ie.css">
<![endif]-->  

The style sheet should contain the same class reference as the main sheet but point to a PNG version. For example:

Language CSS
.svg-icon-name {
  background-image: url("path-to-img/svg-icon-name.png");
}  

If you’re only supporting IE 8 then you could always data-URI them too, but that seems a little excessive to me.

Socialise: