SVG to Data URI

How the SVG becomes a CSS-ready data URI

Drop an SVG — or paste markup straight out of a page — and it is parsed, serialised and wrapped as a data:image/svg+xml URI, in your browser, with nothing uploaded. Two pieces of housekeeping happen on the way. If the root element is missing its xmlns namespace declaration it is added — markup copied out of HTML usually lacks it, and without it the SVG renders fine inline but shows nothing when loaded as an image. And runs of whitespace are collapsed to single spaces, so the indentation of a pretty-printed file does not ship inside every copy of the URI.

URL encoding is the default, and it escapes only the characters that actually break inside a CSS url() — #, %, angle brackets, braces and a handful of others — leaving the rest legible. Double quotes are converted to single quotes so the result can sit inside url("…") without further escaping. The output comes two ways: a complete background-image declaration with no-repeat and contain already set, and the bare URI. Both encodings' byte sizes are shown side by side, so the choice between them is a measurement rather than a guess.

URL-encoded or base64

Base64 re-encodes every byte and costs a flat third in size before compression; URL encoding touches only the unsafe characters, so for typical SVG markup — mostly letters, digits and path data — it comes out roughly a quarter smaller. It also stays legible: you can read the markup inside the URI, spot the path that shouldn't be there, and get a meaningful diff in code review, none of which is true of an opaque base64 blob. Gzip and Brotli find more to compress in the readable form too, because the SVG's own repetition survives the encoding. Base64 earns its place when the URI has to pass through a context that mangles punctuation — a templating layer, a JSON string, tooling with unpredictable escaping — where a purely alphanumeric payload is worth its size premium.

When a data URI beats a file request — and when it doesn't

The URI travels inside the stylesheet, so the image arrives with the CSS and paints on first render: no extra request, no flash of missing icon, nothing extra to deploy. That is worth having for small decorative images — pseudo-element icons, list markers, background textures, custom cursors, the arrow on a styled select. The trade is caching. A file gets its own cache entry and is fetched once for the whole site; a data URI is re-downloaded with every stylesheet that contains it, invalidated whenever that stylesheet changes, and duplicated if it is written in more than one place. Over HTTP/2 the request a URI saves is cheap anyway. The practical rule: a few small images that belong to the stylesheet, encode; an icon set used across pages, keep as files or build a sprite.

Beyond background-image

The same URI works anywhere CSS or HTML accepts an image URL: mask-image, list-style-image, border-image, cursor, content in a pseudo-element, or a plain <img src="…">. The mask form deserves a note, because it solves the recolouring problem. A data URI is a separate document, so the host page's currentColor cannot reach a background image — but used as a mask-image with background-color: currentColor on the element, the SVG becomes a stencil and the colour comes from CSS again. One encoded icon, any colour, hover states included.

Optimise before you encode

Every byte in the source is a byte in every copy of the URI, so this is the one conversion where minification pays twice. Run the file through the Optimizer first — metadata stripped, path precision trimmed — and encode the result; the whitespace collapse here is deliberately conservative and is not a substitute. For where SVG weight actually comes from and what is safe to remove, see the file-size guide.

Common problems

• The URI shows nothing. If it was assembled elsewhere, the usual causes are an unencoded # — everything after it parses as a fragment identifier — or a missing xmlns, without which the payload is not a valid image document. Both are handled here automatically; re-encoding the original file beats patching the string.
• It broke after hand-editing. A raw # or % typed into the encoded markup corrupts the URI from that character on. Edit the SVG, not the URI, and encode again.
• The icon won't recolour from the page. A data URI is its own document — currentColor and custom properties do not reach inside it. Bake the colour in with the Color Editor first, use the mask technique above, or inline the SVG instead of encoding it.
• Blocked by Content-Security-Policy. Background images and <img> loads fall under img-src, so a strict policy needs data: added there. Allowing data: for images is routine; this tool only ever produces image URIs.
• The stylesheet is growing. The URI is repeated in every stylesheet that includes it and cannot be cached on its own. Past a few kilobytes per image, a file request wins.