SVG to Base64 - And Why You Probably Want the Other One
This tool gives you the base64 you came for, and then shows you the thing most converters leave out: for SVG, base64 is the worse of the two ways to inline an image. Base64 exists to carry binary data through text channels safely. An SVG is already text, so encoding it costs you a third of its size for a problem it never had. Percent-encoding does the same job by escaping the handful of characters that would break a URL, leaving the rest of the file as itself - smaller on the wire, and still compressible, which base64 largely is not. Both forms are produced here with live byte counts beside them so you can see the difference on your own file rather than take our word for it. Everything runs in your browser, and the SVG is sanitized before anything is emitted.
How to use this tool
Drop in your SVG
Drag a file onto the box above or click to browse. It is checked by its contents rather than its extension, and any scripts, event handlers or remote references are stripped before encoding - this output is going into your page, so it is cleaned first.
Compare the two encodings
The panel shows the source size, the base64 data URI size and the URL-encoded data URI size together, with the percentage difference. On the icons we tested, the URL-encoded form ran 14 to 18 percent smaller.
Copy the form you need
Five snippets, each with its own copy button: the raw base64 payload, both data URIs, a ready-made <img> tag, and a CSS background-image declaration. Take whichever your build step or CMS field expects.
Watch the size warning
Past about 4 KB the panel warns you. Inlined markup cannot be cached separately from the page that carries it, so a large data URI is re-downloaded on every page that includes it - at that size a linked file is almost always the better call.
Frequently Asked Questions
How much bigger is base64 than the original SVG?
Between 36% and 43% on the four files we measured. A 290-byte icon became a 414-byte base64 data URI; the URL-encoded version was 339 bytes. Base64 uses four characters for every three bytes by design, so a third of that growth is structural and the rest is the data URI prefix.
Why is URL-encoding smaller for SVG?
Because only a few characters need escaping. Percent-encoding pays three bytes each for %, #, angle brackets and newlines, and leaves everything else as itself. Base64 pays a flat 33% on every byte in the file regardless of what it is. For text, the escape tax is far smaller than the flat tax.
Does the URL-encoded version work everywhere?
Yes, in every browser in use. A data URI without the base64 marker is plain percent-encoded text, which is the older and better-supported of the two forms. The only place base64 is genuinely required is a pipeline that assumes it, such as some CMS fields and older build plugins that reject the alternative.
Why did you swap my double quotes for apostrophes?
To avoid escaping them. An SVG is mostly attributes, and encoding every delimiter as %22 costs two bytes apiece. Attribute delimiters become apostrophes and the CSS value is wrapped in double quotes, so neither has to be escaped. Values already containing an apostrophe are left alone and escaped normally.
Should I inline at all, or link to the file?
Inline small, frequently-used icons; link anything larger. Inlining removes a request but the bytes then live inside every page or stylesheet that uses the icon, and cannot be cached on their own. Around 4 KB the maths turns, which is why the panel warns there.
Does gzip change the answer?
It widens the gap rather than closing it. Percent-encoded SVG is still recognisable text with repeated tag and attribute names, so a compressor finds plenty to work with. Base64 output is close to random from a compressor's point of view and barely shrinks at all.
Is my SVG cleaned before it is encoded?
Yes, and that matters more here than in a converter that outputs pixels. Scripts, on* event handlers, remote image references and external stylesheet imports are removed, and the panel lists what it found. Pasted inline, an unsanitized SVG runs whatever it contains.
Can I use the data URI as a favicon or in an email?
As a favicon, no - browsers want a real URL there. In email, no again: every major client blocks SVG entirely, data URI or not. Data URIs are for your own web pages and stylesheets. For email, convert the SVG to PNG first and attach or host that.
Why does my icon look black after inlining?
Because it used currentColor. A data URI is a separate document that cannot inherit the colour of the element referencing it, so currentColor falls back to its initial value. Our SVG to CSS tool detects this and hands you a mask-image snippet, which paints the shape in the element's own text colour instead.
What is the <img> tag for, if I have the data URI?
Convenience, and the alt attribute. The snippet ships with alt="" already set, which is the correct value for a decorative icon and the one people forget - an image with no alt attribute at all is announced by screen readers as its filename, which for a data URI is a wall of characters.
Are my files uploaded anywhere?
No. The encoding is a few lines of arithmetic that run in your browser, so your file is never sent to a server, never stored, and never seen by us. That also means there is no queue and no size limit beyond what your own device can hold in memory.
You might also need
Something not working? Report a bug