SVG to Base64 Converter

Drop an SVG and get a Base64 data URI you can paste straight into a CSS background-image. Everything runs in your browser — the file is never uploaded.

Drop an SVG here or click to browse

SVG files

— —

DATA URI

Raw Base64 Copy

Base64 output

Waiting for an SVG

How to convert an SVG to Base64

Drag your .svg file onto the drop zone above (or click to browse). The tool reads it locally with the browser's FileReader API and produces a data URI — a string of the form data:image/svg+xml;base64,PHN2ZyB4bWxu… that embeds the whole SVG inline. Click Copy, then paste it into your CSS. Use the Raw Base64 toggle if you want only the encoded payload without the data: prefix.

Using an SVG data URI in CSS

The most common use is a CSS background-image. Wrap the data URI in url("…"):

.icon {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");
  background-repeat: no-repeat;
  background-size: contain;
}

You can also use it anywhere a CSS image is accepted — for example a list-style-image, a mask-image, or a border-image. The leading data:image/svg+xml;base64, prefix tells the browser the payload is an SVG, so the MIME type must stay exactly that.

Base64 vs URL-encoding for SVG

Unlike PNG or JPEG, an SVG is plain text, and that changes the math. There are two common ways to inline it in CSS:

• Base64 re-encodes the entire file into a 64-character alphabet, which inflates the size by about 33% regardless of the content.
• URL-encoding (percent-encoding) leaves most of the SVG readable and only escapes a few characters such as <, >, #, and quotes. For typical SVG markup this is usually smaller than the Base64 version.

So for inline CSS where every byte counts, URL-encoding is often the lighter option. Reach for Base64 when you want a single, universally safe blob — one opaque string with no characters that can break the surrounding markup, easy to copy, paste, and store. This tool outputs Base64; if you need the percent-encoded form instead, URL-encode the raw SVG text directly.

Is this private?

Yes. The conversion happens entirely client-side in JavaScript. Your SVG is read into memory in the browser and encoded locally — it is never sent to a server. You can confirm this by opening DevTools → Network: adding an SVG fires no upload request.

Frequently asked questions

How do I convert an SVG to Base64 for CSS?

Drop the .svg onto the converter above. It reads the file locally and outputs a data URI like data:image/svg+xml;base64,PHN2ZyB4bWxu… — paste that into a background-image: url("…") declaration.

Is Base64 or URL-encoding better for inline SVG?

Because an SVG is plain text, URL-encoding only escapes a handful of characters and is usually smaller than Base64, which adds ~33% overhead. Use URL-encoding when you want the lightest inline CSS; use Base64 when you want one safe, opaque blob that never breaks the surrounding markup.

Why is my SVG data URI not showing in CSS?

Check two things: the MIME type must be image/svg+xml (not text/xml or image/svg), and the quotes must be escaped correctly — wrap the data URI in double quotes in url("…") and make sure the SVG markup itself doesn't contain unescaped double quotes that close the value early. Base64 avoids the quoting problem entirely.

How do I go the other way (Base64 back to an SVG)?

Use the Base64 to Image tool to decode a data URI or raw Base64 back into a viewable, downloadable image, including SVGs.