UTILS.
100% in-browser
🖼️

SVG to CSS / Data-URI Encoder

Encode SVG markup as a URL-encoded or base64 data URI, with ready-to-paste CSS background-image and <img> lines. Optional minify.

— output appears here —
— output appears here —
— output appears here —

About this tool

Paste raw SVG markup and get a data URI you can drop straight into CSS or HTML. It produces two encodings and everything is generated in your browser, so nothing is uploaded.

The URL-encoded output swaps double quotes for single quotes, runs encodeURIComponent, then restores a few safe characters (space, colon, slash, equals) to keep it compact and human-readable. The base64 output UTF-8 encodes the SVG and runs it through btoa, giving data:image/svg+xml;base64,… . A byte comparison shows which encoding is smaller; for most icons the URL-encoded form wins.

Enable minify to strip comments and collapse the whitespace between tags before encoding. Copy the background-image line for CSS or the <img src> line for HTML. Note that quotes inside the SVG are normalised to single quotes so the data URI can be wrapped in double quotes safely.

Frequently asked questions

URL-encoded or base64 — which should I use?
URL-encoded is usually smaller and stays readable, which helps debugging. Base64 is more opaque but universally accepted; the size comparison tells you which is smaller here.
Why were my double quotes changed to single quotes?
Attribute quotes are converted to single quotes so the whole data URI can sit inside a double-quoted url("…") or src="…" without escaping. Both are valid in SVG.
Does minify change how the SVG looks?
No. It only removes comments and collapses whitespace between and inside tags; the rendered vector is identical, just smaller.
Is my SVG uploaded anywhere?
No. Encoding runs entirely in your browser with encodeURIComponent and btoa; the markup never leaves your device.

More tools

JavaScript Beautifier / FormatterJavaScript MinifierSource-Code String Escaper / UnescaperIBAN Validator & ParserBIC / SWIFT Code Validator & ParserX.509 Certificate DecoderAll 61 Developer tools →