SVG to CSS Data URI
Encodes an SVG as a CSS background data URI, escaping only what needs escaping to keep it small.
Turns an SVG into a data URI you can paste into a stylesheet, URL-encoded rather than Base64 because that is both smaller and still readable. It shows the three sizes side by side, renders the encoded URI so you can see it works, and warns about the handful of things that make an SVG render as nothing at all once it becomes a data URI.
Drop an SVG
Or edit the markup below.
SVG
Preview
Rendered from the encoded URI itself, so if it appears here it will appear in your stylesheet.
Size
Raw SVG
165 B
URL-encoded
198 B
Base64
246 B
URL-encoding is 19.5% smaller than Base64 here.
Base64 costs a flat 33⅓% on any input. An SVG is text, and only a handful of its characters need escaping inside a CSS url() — so URL-encoding typically lands around 10% over the raw file. It also stays readable, greppable and diffable in the stylesheet, which Base64 does not.
Output
Only %, <, >, # and a few bracket characters are escaped, and the SVG’s double quotes become single ones so the CSS string can use double quotes safely. The # matters most: unescaped in fill="#fff" it starts a fragment identifier and truncates the URL, which renders as nothing at all with no error anywhere.
Need a raster instead? The SVG rasteriser renders to PNG at any scale. Want the SVG smaller before encoding? The SVG optimiser rewrites the path data.
How to use it
Paste or drop the SVG
The source box is editable, so you can fix the markup here rather than going back to the file. The example is a stroked icon, which is the common case.
Read the warnings before anything else
A missing `xmlns` is the one that catches everyone: inline in HTML it does not matter, but a data URI is parsed as a standalone XML document and without it the browser renders nothing and reports nothing. The other warnings cover external images, scripts and percentage sizes with no viewBox.
Check the preview
It is drawn from the encoded URI itself, not from the source, so if the icon appears in that box it will appear in your stylesheet. An empty box means the URI is broken, and the warnings above usually say why.
Pick the property and copy
The declaration changes with the property: `background-image`, `mask-image`, `content` or a bare `src`. Base64 is available for the rare consumer that cannot take a percent-encoded URI, and it is always larger.
Common questions
Why not Base64? Everyone uses Base64.
Base64 costs a flat 33⅓% on any input, because it turns three bytes into four. An SVG is text, and only `%`, `<`, `>`, `#` and a couple of brackets actually need escaping inside a CSS `url()`, so URL-encoding usually lands around 10% over the raw file. It also stays greppable and diffable in the stylesheet. The panel prints both numbers for your file.
My icon disappeared and there is no error anywhere.
Almost always an unescaped `#`. In `fill="#fff"` the hash starts a fragment identifier, so the URL is truncated at that point and the browser fetches something that is not an SVG — silently. This encoder escapes it. If you hand-wrote the URI, that is the first thing to check.
Can I animate or script the SVG in the data URI?
Not as a CSS background. An SVG loaded that way runs in a restricted, static mode: no scripts, no `foreignObject`, no external resources, and CSS on the outer page cannot reach inside it. Declarative SMIL animation sometimes runs and sometimes does not, depending on the engine. If you need any of that, inline the SVG in the document instead.
When is a data URI the wrong choice?
When the SVG is large or used in more than a couple of places. A data URI cannot be cached separately, so every page that ships the stylesheet ships the icon again, and a 30KB illustration inlined in CSS is 30KB on the critical path. Small icons and patterns are what this is for; anything bigger is better as a file, or as a sprite.
Feed it from
SVG Optimiser
Removes editor cruft, collapses transforms and rounds path precision, showing the rendered diff.
Image to Base64 / Data URI
Encodes an image as a Base64 string or a ready-to-paste data URI for CSS, HTML or JSON.
CSS Beautifier & Minifier
Formats or minifies CSS without reordering anything, preserving the token stream exactly.
SVG Editor and Explainer
Edits an SVG next to its live render and explains the file: viewBox and scaling, transforms, every path command, inherited paint, wasted bytes, and what breaks in an <img>, a data URI or inlined.
Next
These accept what this tool produces, so the result can go straight in.
CSS Beautifier & Minifier
Formats or minifies CSS without reordering anything, preserving the token stream exactly.
Image to Base64 / Data URI
Encodes an image as a Base64 string or a ready-to-paste data URI for CSS, HTML or JSON.
SVG Optimiser
Removes editor cruft, collapses transforms and rounds path precision, showing the rendered diff.
Colour Format Converter
Converts a colour between HEX, RGB, HSL, HWB, LAB, LCH and OKLCH and names the nearest known colour.
Colour Picker
Picks a colour on an OKLCH field, with a screen eyedropper or from an uploaded image, and copies it in any notation.
Contrast Checker
Scores a foreground and background pair against WCAG 2 and APCA and suggests the nearest passing colour.