SVG → CSS
SVG to CSS background converter
Inline a small SVG straight into your stylesheet: one fewer request, no asset pipeline, no sprite sheet. Drop the file or paste the markup and get a copy-ready background-image rule — URL-encoded the compact way (not bloated Base64), with a live preview rendered from the exact CSS you'll copy.
Data-URI craft
- 01
Optimize before you inline
Every byte of the SVG is repeated inside your CSS forever. Thirty seconds in the SVG Optimizer first routinely halves the rule you're about to paste.
- 02
URL-encoding beats Base64
It's smaller, it gzips better, and you can still read and grep the markup inside your stylesheet six months from now.
- 03
Need it tintable? Flip to Mask
background-image can't inherit CSS color. The Mask output mode emits mask-image plus currentColor, so one icon recolors with your text — the preview demonstrates it tinted.
Questions, answered
URL-encoded or Base64 — which should I pick?+
URL-encoded, almost always: it's smaller for typical SVG markup (only special characters get escaped, not every byte), it stays human-readable in your stylesheet, and it compresses better. Base64 is the fallback for markup with lots of exotic characters.
When is a data URI better than linking the .svg file?+
Small, frequently-shown decorations — chevrons, patterns, bullets — where saving an HTTP request beats cacheability. For large artwork or images reused across many pages, an external file wins because the browser caches it once.
Can I recolor the background with CSS?+
Not via background-image — data URIs can't see your page's CSS. That's what the Mask output mode is for: it emits the same data URI as mask-image with background-color: currentColor, so the shape tints from your text color. The preview shows it live.
Do SVG data URIs work in all browsers?+
Every modern browser, yes. The classic gotchas were unencoded # and < characters breaking parsing in some engines — exactly the characters this tool escapes, which is why the encoded output is boring and reliable.
The data URI is bigger than my SVG file. Is that wrong?+
No — escaping adds a few percent overhead (the stats show exactly how much). You pay those bytes to save a network round-trip. Run the file through the SVG Optimizer first so the overhead applies to as few bytes as possible.