background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='%234f46e5' /%3E%3C/svg%3E");About SVG to CSS Background — Data URI & URL Encode
Inlining an SVG as a CSS background-image lets you drop a vector icon, bullet, or decorative fill straight into a stylesheet — no extra HTTP request, no separate asset file to manage. This SVG to CSS converter turns any SVG markup into a ready-to-paste `background-image: url("data:image/svg+xml,…")` rule.
It offers two encodings: a URL-encoded data URI (recommended — it's smaller and stays human-readable in your CSS) and a classic base64 data URI. Whitespace is minified before encoding, and double quotes are swapped to single quotes so the value never breaks the surrounding CSS string.
Everything runs entirely in your browser. The SVG you paste never leaves your device.
Features
- Generate a CSS background-image data URI from raw SVG markup
- URL-encoded output (smaller, recommended) or base64
- Whitespace minified automatically before encoding
- Works completely offline — your SVG never leaves the browser
How to use
- Paste your SVG markup into the input pane.
- Choose URL-encoded (smaller) or Base64.
- Copy the generated background-image rule from the output pane into your CSS.
Frequently asked questions
Why URL-encode instead of base64?
URL-encoded SVG data URIs are usually smaller than base64 (base64 adds about 33% overhead) and stay readable in your stylesheet, so they diff cleanly and are easy to tweak by hand. Base64 is offered for tooling that expects it.
Why are the double quotes in my SVG changed to single quotes?
The CSS value wraps the data URI in double quotes — url("…"). Converting the SVG's own attribute quotes to single quotes keeps the markup valid while avoiding a clash with that wrapper. SVG treats single and double attribute quotes identically.
Will this work as a background in any browser?
Yes. Inline SVG data URIs in background-image are supported across all modern browsers. Use the URL-encoded form for the smallest, most compatible output.
Does my SVG get uploaded anywhere?
No. Encoding happens locally in your browser using built-in APIs. Nothing you paste is ever sent to a server.
Related tools
Everything runs locally in your browser — your input is never uploaded.