SVG to data URI
Inline an SVG into CSS or an img tag, URL-encoded or base64.
By opening this website or using its tools, you agree to our Terms and Privacy Policy.
or drag it here
SVG file
Your file never leaves your browser during processing
How it works
To turn an SVG into a data URI, paste the code or drop the file onto this page — you get a ready-to-paste URI plus CSS background and img snippets, in both URL-encoded and base64 form with their sizes compared, generated in your browser.
A data URI puts the whole image inside the stylesheet or the markup, so the browser has it the moment it parses that line instead of making a second request for it. For small, decorative SVGs — a chevron on a select, a checkmark on a custom checkbox, a background pattern — that removes a round trip and the flicker that comes with it.
The encoding choice is where most advice goes wrong. Base64 is the reflex, and for SVG it is usually the worse option: it inflates any input by roughly a third, and the result is unreadable, so changing the icon later means decoding it first. URL encoding only escapes the characters that would break a CSS url() or an attribute — the percent sign, angle brackets, the hash, braces — and swaps double quotes for single ones. SVG is mostly plain ASCII, so the encoded result is frequently smaller than the original file. Both are generated here with their byte counts side by side so the decision is a measurement rather than a habit.
Size is the real limit on this technique. Inlined bytes sit in a render-blocking stylesheet and cannot be cached separately from it, so a large data URI delays the page rendering at all and is re-downloaded whenever the CSS changes. Past roughly ten kilobytes a normal .svg file is usually faster; the tool says so when the output crosses that line. Data URIs also do not compress as well as the raw file does over the wire.
Scripts, event handlers, and external references are stripped before encoding, so the string you paste into your CSS cannot carry anything active with it.
FAQ
Should I use URL encoding or base64?
URL encoding, almost always. It produces a smaller string for typical SVG content and stays readable and editable. Base64 is only worth it in the rare case where the markup is dense with characters that all need escaping — the tool shows both sizes so you can see which applies.
How large can a data URI be?
Browsers accept very large ones, but that is not the constraint that matters. Inlined bytes block the stylesheet carrying them and cannot be cached independently, so past about 10KB a separate .svg file usually loads faster.
Why doesn’t my data URI work in CSS?
The two usual causes are a missing xmlns attribute — required when the SVG is treated as a standalone document — and unescaped characters such as # or a double quote inside url(). Both are handled here: the namespace is added if absent and only the characters that need escaping are escaped.
Can I animate or restyle an SVG used as a data URI?
Not from outside it. An SVG referenced as a background image or an img src is isolated from the page, so page CSS cannot reach inside it and currentColor will not inherit. Inline the SVG markup itself if you need that.