What is an SVG to CSS background converter?
It turns SVG markup into a data URI and wraps it in a CSS rule, so a vector graphic can live inside your stylesheet instead of sitting on the server as a separate file. No extra request, no flash of a missing icon, and the graphic stays sharp at any size. Small icons, checkmarks, chevrons, decorative dividers and repeating patterns are the usual candidates.
The reason most hand-rolled data URIs fail is escaping. A single unescaped # in a hex color makes the browser treat everything after it as a URL fragment, and the background silently disappears. This tool handles that, along with the quote character you chose to wrap the URL, the curly braces that break Sass, and the HTML entities like • that XML has never heard of. Then it loads the result through the browser's own image decoder and tells you whether it really renders.
How to Use This Tool
- Add your SVG. Paste the markup, drop an .svg file onto the box, or press Open file. Press Sample if you just want to see how it behaves.
- Pick an encoding. URL encoded is the right default for almost everything. The comparison panel shows both sizes so you can see which one wins for your graphic.
- Match your quote style. If your stylesheet wraps URLs in single quotes, switch to Single and the escaping adjusts so nothing breaks.
- Recolor if you need to. Turn on Recolor to rewrite the fills or strokes before encoding, since a data URI cannot inherit a color from your page.
- Set the background properties. Repeat, size and position feed straight into the rule and into the preview.
- Check the preview. That element carries the exact declaration underneath it. Drag its bottom edge to resize it and watch the graphic respond.
- Take the format you need. A full CSS rule, the shorthand, a custom property, a ::before pseudo-element, a recolorable mask, SCSS, LESS, Tailwind, or the bare data URI.
Common Use Cases
Inlining is a trade, not a free win, so it pays off in some places more than others. It tends to earn its keep for:
- Small interface icons such as chevrons, checkmarks and close buttons, where the request costs more than the bytes.
- Custom select arrows and checkboxes, which have to be a background image because there's no other way to restyle the native control.
- Repeating textures like hatching, dots or noise, where one small tile covers an entire section.
- Email and single-file pages, where you cannot rely on a separate asset being reachable.
- Component libraries that ship one CSS file and no image folder alongside it.
- Icons that change color on hover, using the mask output so
background-color does the coloring.
- Trimming a graphic first. Our SVG Optimizer goes further than the cleanup here, and the SVG to Data URI Converter is the one to use when you want the raw URI for an img tag rather than a CSS rule.
Frequently Asked Questions
Should I use URL encoding or Base64?
URL encoding, nearly always. Base64 adds a flat third to the file size, while URL encoding only pays for the handful of characters that need escaping, which is usually somewhere between 3 and 12 percent on an icon. It also leaves the markup readable, so you can spot a wrong color in your stylesheet, and it compresses far better over gzip or Brotli because the XML stays repetitive. Base64 is worth it only when the SVG embeds a raster image.
Why does my SVG background not show up?
There are four usual culprits, and this tool fixes all of them. An unescaped # from a hex color truncates the URL at that point. A missing xmlns attribute makes the file invalid as a standalone document, which is what a data URI is. HTML entities such as or • are undefined in XML and stop the whole graphic from parsing. And an unescaped quote ends the CSS declaration early. If the preview says it verified, the URI genuinely decoded.
Why doesn't currentColor work in a data URI?
Because the SVG is a separate document. It has no idea what color your text is, so currentColor resolves to its own default of black rather than inheriting from the element behind it. You have two options. Recolor the graphic here before encoding, which bakes the color in, or use the mask output, where the element's background-color paints through the shape and currentColor works normally again.
Is my file uploaded anywhere?
No. Everything happens in your browser. The markup you paste and the files you drop are never sent to us, which also means the tool keeps working if your connection drops.
Does inlining hurt caching?
It can, and it's the main argument against doing it everywhere. A separate .svg file gets cached on its own and shared across every page, while an inlined graphic is re-downloaded whenever the stylesheet changes. For a handful of small icons that trade is worth it. For a large illustration used on one page, keep the file separate.
Can I animate an SVG used as a background?
Only what's inside it. CSS animations declared in an embedded style block and SMIL animation will run, but your page's CSS and JavaScript cannot reach into the graphic to target its shapes. Scripts never execute at all. If you need to animate individual paths from the page, put the SVG inline in your HTML instead.
Does it work in every browser?
SVG data URIs in background-image work in every current browser and have for many years. The mask output is the one to watch, since it still wants the -webkit- prefix for older Safari, and the code here includes both lines for that reason.
How big is too big?
Once a graphic pushes past a couple of kilobytes encoded, the case for inlining gets thin. It sits in your render-blocking stylesheet, so it delays first paint for every page that loads that CSS, cached or not. The size comparison panel gives you the number to judge it with.
What does the cleanup actually remove?
Comments, metadata, editor leftovers from Inkscape, Figma and Sketch, title and description elements, event handler attributes, scripts, and the unused xlink namespace. It also rounds the numbers in path data to the precision you choose. That last part is the risky one, so we parse the path properly rather than running a regular expression over it. Arc flags in a path are packed single characters, and a naive rounder reads them as one number and quietly redraws the curve.