SVG to Base64 Converter - Data URI for CSS

Pick an SVG file or paste the markup, and you get both a Base64 data URI and a URL-encoded one, with the byte size of each so you can see which wins.

You also get the CSS background rule and an img tag ready to paste. It all runs in your browser, so nothing is uploaded.

How to Convert an SVG to Base64

1. Click Select SVG, or paste your markup into the box.
2. A preview and four code blocks appear below.
3. Copy whichever one you need.

SVG to Base64 vs URL-Encoding

This is the part most converters skip. Base64 inflates any input by about 33%, because it packs 3 bytes into 4 characters. That tax applies even though an SVG is already plain text.

Percent-encoding does not work that way. It only escapes the few characters that would break a CSS url() value - angle brackets, the hash, quotes - and leaves the rest alone. For a typical icon it comes out 20 to 30% smaller than the Base64 version.

So the tool shows you both sizes and names the winner. Use URL-encoding in CSS unless something in your build pipeline chokes on it.

Why SVG Is the One Format Worth Inlining

Inlining a PNG or a JPEG is usually a bad trade. They are already compressed binary, the 33% bump hurts, and the browser cannot cache them separately any more.

SVG is different. It is text, so it gzips well even inlined, it stays sharp at any size, and icons are small to begin with. One saved HTTP request for a 2 KB icon is a real win.

The honest limit: past roughly 10 KB of markup, put it back in its own file.

Your SVG Never Leaves the Browser

Other converters send your file to a server and hand the string back. This page does not. The markup is read and encoded on your own machine.

Paste the markup instead of picking a file and nothing is even read from disk. Either way there is no upload, no account and no stored copy.

Watch the Quotes in Your CSS

An SVG is full of double quotes. Drop it inside a CSS url("...") that also uses double quotes and the value ends early, which breaks the rule silently.

The URL-encoded output here converts inner double quotes to single quotes for exactly this reason. If you hand-edit the string afterwards, keep that in mind.

Other Image Formats

For raster images, PNG to Base64 suits flat icons and JPG to Base64 handles photos.

Going the other way, Base64 to image turns a string back into a picture and previews it first.