SVG to CSS - A background-image That Actually Works
Pasting an SVG into a stylesheet fails in two specific ways, and both are silent. Get the escaping wrong and an unencoded hash in a fill colour truncates the URL, so the rule parses and the image simply never appears. Use currentColor in your artwork and it stops recolouring the moment it becomes a data URI, because the URI is a separate document with nothing to inherit from. This tool handles the first for you and warns you about the second, giving you a background-image declaration you can paste as-is. It uses the URL-encoded form rather than base64, which for SVG is both smaller and more compressible. Everything runs on your device, and the file is sanitized before anything is emitted.
How to use this tool
Drop in your SVG
Drag a file onto the box above or click to browse. Scripts, event handlers and off-document references are removed before anything is generated, and the panel lists what it took out.
Copy the background-image rule
The first snippet is a complete declaration with the data URI already escaped and quoted - paste it straight into a rule. A base64 version sits below it for pipelines that insist on one, with both byte counts shown.
Check the currentColor warning
If your artwork uses currentColor, a notice appears explaining why it will render black and offering a mask-image snippet instead. That snippet paints the shape with the element's own text colour, which is the closest working equivalent.
Add the sizing properties you need
A background-image on its own tiles at the artwork's intrinsic size. Add background-size and background-repeat: no-repeat to control it, or use the mask snippet, which already includes both.
Frequently Asked Questions
Which characters have to be escaped?
Five, plus line breaks. The percent sign has to go first or it would escape the escapes. Then the hash, which otherwise starts a URL fragment and truncates everything after your first hex colour. Then angle brackets, which break out of an HTML attribute, and the double quote wrapping the value.
My background-image just does not appear. Why?
Almost always an unescaped hash. A fill of #c33 inside an unescaped data URI ends the URL at the hash, so the browser requests a truncated document, gets nothing usable, and shows nothing - with no console error, because as far as CSS is concerned the rule was perfectly valid.
Why does currentColor stop working in a data URI?
Because the data URI is a separate document. currentColor resolves against the computed color of the element the SVG is in, and an SVG loaded as an image has no such element - it is not part of your page's tree. It falls back to its initial value, which is black.
What is the mask-image workaround?
You use the SVG as a stencil rather than as a picture. Set background-color to currentColor so the element paints in the inherited text colour, then use mask-image with your data URI so only the artwork's shape shows through. Include -webkit-mask-image alongside it for Safari.
Should I use base64 in CSS instead?
Rarely. Base64 makes the same image about a fifth larger inside the stylesheet and compresses far worse, since it looks like noise to gzip. It is worth reaching for only when a build tool or CMS refuses the percent-encoded form, which is why this page offers both.
Can I use single quotes around the url() value?
Not with the output here, and that is deliberate. Attribute delimiters inside the SVG are converted to apostrophes so they do not need escaping, which is where most of the size saving comes from. That makes the double quote the only safe wrapper - an apostrophe would end the value early.
Does this work in a CSS custom property?
Yes. Assign the whole url("…") value to a custom property and reference it wherever you need it, which is a tidy way to keep a long data URI out of the middle of a rule. Custom properties take the value as a token sequence, so the escaping here is already correct.
How large is too large for a stylesheet?
Around 4 KB of SVG source, which the panel warns at. A data URI in CSS is downloaded by every visitor who loads that stylesheet, whether or not the rule ever matches, and it cannot be cached separately. Below that threshold it usually beats an extra request; above it, it usually does not.
Can I put a whole illustration in a stylesheet?
You can, but you probably should not. Illustrations run to tens of kilobytes, and every one of those bytes is downloaded by everyone who loads the stylesheet regardless of whether the rule ever applies. Icons and small decorative shapes are what data URIs are for; anything with real detail belongs in its own file.
Will the browser cache the inlined image?
Only as part of the stylesheet that contains it, which is the trade. There is no separate cache entry and no separate request, so the first visit is faster and any later change to the stylesheet re-downloads the image along with it. For an icon used on every page that is usually a good deal.
Is anything sent to a server?
No. The escaping runs in your browser, so the file never leaves your device, is never stored, and is never seen by us. It also means there is nothing to wait for - the snippets appear the moment the file is read.
You might also need
Something not working? Report a bug