SVG to Base64

Base64 Is Usually the Wrong Answer for SVG

You encode an icon, paste the string into your stylesheet, and it is enormous. Every tutorial says Base64, so you assume that is just the cost. It is not. Base64 adds a flat third to any file, and an SVG to Base64 conversion pays that tax for no reason.

SVG is already text. Percent-encoding it instead usually comes out 20 to 30% shorter. This page produces both and tells you the exact difference for your file.

We still give you the Base64 output, because some build tools and CMS fields demand it. Just know what it costs.

How to Encode SVG for CSS Without Wasting Bytes

1. Minify with SVGO first. Design tools export a shocking amount of junk.
2. Check for xmlns. Without it the Data URI renders blank.
3. Drop the file in. Both encodings appear together.
4. Read the comparison line. It names the winner in characters.
5. Copy the shorter one. Usually the URI-encoded version.

Step one is where the real savings live. A logo exported from Figma often carries editor metadata, empty groups, and coordinates to twelve decimal places. SVGO regularly halves it.

SVG to Data URI: What Actually Gets Escaped

Percent-encoding only touches the characters that would break a URL. For SVG that is a short list:

The hash is the one that bites hardest. Any hex colour inside your markup contains one, so an unescaped file breaks the moment it has a fill="#333" in it.

A caveat on the quote swap: single quotes are valid XML, but if your SVG already contains single quotes inside attribute values, check the output before shipping.

What Breaks Inside an Inline SVG Background

Browsers treat an SVG loaded as an image as a sealed document. That protects you, and it also removes features you might be expecting.

• No scripts. Anything JavaScript-driven simply will not run.
• No external references. Web fonts, linked images, and outside stylesheets are blocked.
• No CSS inheritance. currentColor cannot reach inside, so the icon will not follow your text colour.

That last point is the usual disappointment. If your icon has to change colour with a theme, a Data URI background is the wrong technique — use an inline SVG element or a CSS mask instead.

Building React components from your icons? The SVG to JSX converter turns the same file into a component whose colours you can control with props.

When to Reach for Base64 Anyway

Percent-encoding wins on size, but it is not always available. Three cases where Base64 is right:

• Strict CMS fields. Some editors mangle raw angle brackets and percent signs.
• Non-CSS contexts. APIs and JSON payloads usually expect the Base64 form.
• Very small files. Below a few hundred bytes the difference is not worth the thought.

For a raster image, this whole comparison is moot — percent-encoding binary data is far worse than Base64. Use the PNG to Base64 encoder or the general image encoder for those.

Decoding an SVG String

Going the other way? The Base64 image decoder recognises SVG from its payload, which starts with PHN2Zy or PD94bWw depending on whether the file opens with an XML declaration.

One warning we repeat often: never host an SVG from an untrusted source on your own domain. In an image tag it is harmless, but served directly it becomes a same-origin document that can run scripts.

Frequently Asked Questions

The Short Version

Minify, then encode, then take the shorter output. For SVG to Base64 that usually means not using Base64 at all — the percent-encoded version does the same job with fewer characters.

And remember what an image-context SVG gives up: no scripts, no external assets, no colour inheritance. If you need those, inline the element instead.