SVG to CSS background converter

How to use the svg to css converter

1. Paste or drop your SVG. Paste the SVG code into the box or drop an .svg file. A sample arrow icon is loaded first.
2. Choose how you’ll use it. Background puts the SVG behind an element. Mask turns it into a shape you can colour with background-color, ideal for icons that should follow the text colour. Custom property stores it in a CSS variable so you can reuse it.
3. Check the preview. Set the preview size, background and colours to see exactly how the CSS will look, including as a repeating pattern.
4. Copy the CSS. Copy the full rule, or just the data URI to use in your own code.

Why URL-encode instead of Base64?

SVG is text, so it can go into a data URI almost as it is. Only a handful of characters, such as #, <, > and %, need encoding. That result is usually 20–30% shorter than Base64, still readable, and compresses better with gzip or Brotli. Base64 is only worth it if a tool or CMS rejects the special characters.

Recolouring icons with mask

An SVG used as a background image is drawn as a fixed picture: CSS can’t change its colours, and currentColor inside it falls back to black. Using it as a mask instead keeps only its shape, and the element’s background-color shows through. Set that to currentColor and the icon automatically matches the surrounding text, including hover states and dark mode.

What gets cleaned

Refract removes XML declarations, comments, editor metadata and extra whitespace, and adds the xmlns attribute if it’s missing, because data URIs don’t display without it. For deeper savings, such as rounding numbers and merging paths, run the file through the SVG optimiser first.

Frequently asked questions