Skip to main content

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

- (incept: )

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.

Supported by all major browsers, including IE9+, see CSS background-image support table.