Skip to main content

A simple utility to reformat raw SVG images to work cross-browser as CSS background-images in your style sheets.

- (update: )

SVG to CSS background-image reformatter

SVG to CSS background-image reformatter
Drop or select files
Options

Details

Thumb Dimensions Size File name

Compress the SVG first

Always compress SVGs before running in production. Remove all the nasty Illustrator code, simplify the structure and reduce the decimal places used. I personally use a mix of SVG Optimiser and SVGOMG.

Why use raw SVG instead of data URI in the CSS?

All major browsers support this method, including IE9+, see CSS background-image support table.

Embedding raw SVGs into the CSS is the currently preferred method because:

  • The SVG remains hand editable in the style sheet.
  • The SVG has a smaller footprint, theoretically up to 25% less code a than in data URI format.
  • Raw SVGs also achieve better gzip compression than their data URI equivalents.
  • The CSS file is cacheable.

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.

<!--[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:

.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: