SVG to data URI
Put an SVG straight into your CSS or HTML, no separate file needed.
Using toolbook means you agree to our Terms and Privacy Policy.
or drag it here
SVG file
Your files stay on your device
How to use it
Paste SVG code or drop a file here to get a data URI, plus ready-to-paste CSS and img snippets, in both URL-encoded and base64 forms with sizes compared.
A data URI lets you put a small SVG — like an arrow, a tick, or a background pattern — straight into your CSS or HTML, so the browser doesn’t have to load a separate file.
Paste your SVG code or drop the file in. You get the data URI plus ready-made CSS background and img snippets, each with a copy button.
URL-encoded or base64? Pick URL-encoded in almost all cases: it’s usually smaller and you can still read and edit it. The tool shows both sizes side by side, so you can see for yourself.
Keep it small. Past about 10 KB, a normal .svg file usually loads faster — the tool warns you when you cross that line.
FAQ
URL encoding or base64?
URL encoding, almost always. It’s usually smaller and stays readable.
How big can a data URI be?
Browsers accept big ones, but past about 10 KB a separate .svg file usually loads faster.
Why doesn’t my data URI work in CSS?
Usually a missing xmlns attribute or an unescaped # or quote. This tool handles both for you.
Can I change the colour of a data URI SVG with CSS?
No. Page styles can’t reach inside it. Put the SVG code directly in your page if you need that.
How it worksFor the curious
Base64 inflates any input by about a third and is unreadable. URL encoding only escapes the characters that would break a CSS url() or attribute — %, angle brackets, #, braces — and swaps double quotes for single. SVG is mostly ASCII, so the result is often smaller than the original.
Inlined bytes sit in a render-blocking stylesheet and cannot be cached separately, so a large data URI delays rendering and is re-downloaded whenever the CSS changes. Data URIs also compress less well over the wire than the raw file.
A missing xmlns is added, since it is required when the SVG is a standalone document. Scripts, event handlers, and external references are stripped before encoding.
An SVG used as a background or img src is isolated from the page, so page CSS cannot restyle it and currentColor does not inherit. Inline the markup if you need that.