SVG to CSS data URI

What it does

This svg to data uri encoder turns SVG markup into a string you can put straight into CSS or an img tag, so a small icon needs no separate file or request. By default it uses minimal URL-encoding, which escapes only the characters that would break a CSS url() and keeps the rest readable. Base64 is available too. You get the full CSS rule, an img tag and the bare data URI, each with a copy button.

How to use it

1. Paste the whole SVG element, from the opening svg tag to the closing one.
2. Choose URL-encoded, which is smaller, or base64.
3. Pick the CSS property you want, such as background-image or mask-image.
4. Check the preview on the light and dark squares.
5. Copy the CSS rule, the img tag or the URI on its own.

How to read the result

The sample check icon is 185 bytes of SVG. URL-encoded, the data URI is 218 bytes, an overhead of 18%. Most of that is the data:image/svg+xml, prefix and the escaped angle brackets, written as %3C and %3E. Double quotes inside the SVG became single quotes, so the whole value can sit safely inside url("...").

The same icon in base64 is 274 bytes, about 48% bigger than the SVG itself. Base64 always adds roughly a third plus the prefix, and the result cannot be read or edited by hand. Encoding every character with JavaScript's encodeURIComponent, which some guides suggest, gives 308 bytes here, larger still.

Use data URIs for small icons that appear in CSS: ticks in list bullets, arrows in select boxes, background patterns. Larger graphics are better as separate files, because the browser caches them once, while a data URI is downloaded again whenever the stylesheet changes.

For mask-image, the SVG's own colours do not matter; the shape is filled with the element's background colour.

Shrink the SVG first with the SVG optimiser for the smallest result. See website design and development for help with front-end performance.