SVG to CSS Data URI
Convert SVG markup into an optimized CSS data URI — URL-encoded or base64, minified, with live preview and size readout.
This tool runs 100% in your browser. Your data is never uploaded, stored, or logged.
CSS output
Preview
About this tool
Inlining small SVGs as CSS data URIs kills an HTTP request per icon and keeps styling self-contained. This converter minifies your SVG and encodes it correctly — URL-encoding (smaller and debuggable) or base64 — wrapped in a ready-to-paste background-image rule.
A checkered live preview shows the result, and a byte counter helps you keep URIs sensible.
How to use it
- Paste your SVG markup (a missing xmlns is added automatically).
- Choose URL-encoding (recommended) or base64, and your quote style.
- Copy the generated CSS class.
- Check the preview and size readout before shipping.
Useful ways to apply it
- Inlining UI icons without an icon font or sprite sheet.
- Custom list bullets and form control graphics in pure CSS.
- Email-safe decorative graphics where external images are blocked.
- Eliminating tiny-image HTTP requests on performance-critical pages.
Frequently asked questions
URL-encoding or base64 — which is better?
URL-encoding is usually 20–30% smaller for typical SVGs and stays human-readable in devtools. Base64 is denser for SVGs full of special characters. The size readout lets you compare.
Why does my SVG need xmlns?
Data-URI SVGs are parsed as standalone XML documents; without the namespace declaration browsers render nothing. The tool injects it if missing.
Is there a size limit?
No hard limit, but URIs beyond a few KB bloat your CSS and can't be cached separately — icons and simple shapes are the sweet spot.
Privacy
This tool runs 100% in your browser. Your data is never uploaded, stored, or logged.