SVG to Data URI

How it works

The markup is escaped and wrapped as a data:image/svg+xml URI. URL encoding is the default: it only touches the characters that need escaping, so the result stays human-readable and comes out roughly a quarter smaller than base64, which re-encodes every byte. Double quotes are converted to single quotes so the URI can sit inside url("…") without further escaping. The output is a complete background-image declaration, and both encodings' sizes are shown so the choice is a measurement rather than a guess.

When to use it

Decorative images that are not worth a network request: pseudo-element icons, list markers, background patterns, custom cursors. Contexts where shipping a separate asset file is awkward — email templates, embedded widgets, single-file demos. It is a one-or-two-small-images technique; for a whole icon set, a sprite keeps the images cacheable and out of your stylesheet.

Common problems

• The icon won't recolour from the page. A data URI is a separate document — currentColor and custom properties from the host page do not reach inside it. Bake the colour in with the Color Replacer first, or inline the SVG instead of encoding it.
• It broke after hand-editing. A raw # typed into the encoded markup terminates the URI — everything after it reads as a fragment identifier. Re-encode after any edit rather than patching the string.
• 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. Optimize before encoding — every byte saved is saved again in every copy.