SVG to Base64 Converter

SVG to Base64, explained

Encoding an SVG to Base64 turns the vector file into a plain-text string you can embed directly in CSS, HTML or JSON — no separate file to host. Because SVG is resolution-independent, an inlined SVG icon stays razor-sharp at any size and on any screen density.

Base64 vs URL-encoding for SVG

SVG is itself text, so you'll see two ways to inline it in CSS: Base64 and URL-encoding (percent-encoding). Base64 — what this tool outputs — is the most copy-paste-safe and universally compatible. URL-encoding often produces a slightly shorter string for SVG, but it's easy to get the escaping wrong; Base64 is the reliable default.

How to use it

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxu..." alt="icon" />

.icon { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxu...); }

When to inline an SVG

• Small UI icons and logos you want crisp on every display.
• CSS backgrounds where you'd rather not ship a separate request.
• Self-contained components, emails or design tokens.

Why Base64 SVG instead of a raw svg+xml URL

You can also inline SVG as data:image/svg+xml,... with percent-encoding. That form breaks if the markup contains unescaped #, quotes, or newlines. Base64 avoids those CSS url() pitfalls. The MIME is image/svg+xml; the body usually starts with PHN2Zy (<svg in Base64).

Encoding is not sanitizing

Scripts, external font URLs, and xlink:href to other files still behave as in the original SVG. If you accept user-supplied SVG, strip scripts before encoding. This tool does not rewrite markup.

Private by design

The conversion runs locally with your browser's FileReader API — no upload, no server.