All SVG Icons LogoAll SVG Icons

Free SVG to Base64 & Data URI Encoder

Paste SVG code, get a base64 or URL-encoded data URI plus a ready-to-paste CSS snippet — instantly, in your browser.

SVG input

Load example

Encoded output

Base64 string

The encoded string only, without the data: prefix.

Data URI

Ready to drop into an <img src>, href, or fetch() call.

CSS background-image

Paste directly into a stylesheet — no external file request.

A pure string transform, no upload

Base64-encoding an SVG doesn't need a server round trip — it's a deterministic string transform the browser can do natively. This tool runs TextEncoder and btoa (for base64) or encodeURIComponent (for the URL-encoded variant) directly on your pasted markup, so the result appears as you type with zero network latency and zero risk of your SVG being logged somewhere.

Two encodings, three outputs

Base64

The classic data URI format — widest compatibility, safest for SVGs with many special characters.

URL-encoded

Percent-encoded markup without a base64 step. Usually smaller for SVG since it's already plain text.

CSS snippet

A ready-to-paste background-image: url("...") declaration for either encoding.

Common use cases

Inline CSS background icons

Embed a small icon directly in a stylesheet without a separate HTTP request.

Email-safe images

Some email clients block linked images but render data URIs — useful for small inline glyphs.

Single-file components

Bundle an icon directly into a JS/JSX string or a design-token file with no build step.

Placeholder / blur-up images

Use a tiny inline SVG as an instant placeholder before a real image loads.

CSS mask-image sources

Data URIs work as mask sources too, for CSS-driven icon coloring.

No-build prototyping

Paste a working icon straight into a CodePen, email template, or static HTML file.

Related tools

Clean up the SVG first with the SVG optimizer to keep the encoded string as small as possible, recolor it with the SVG color editor, or convert it into a React/JSX component instead of a data URI if you're working in a component-based framework.

Frequently Asked Questions

Paste the SVG markup or drag a .svg file into this tool. It encodes the file as base64 instantly and shows the raw string, the full data:image/svg+xml;base64,... URI, and a CSS snippet — all client-side, nothing is uploaded.

A data URI embeds a file directly inside HTML, CSS, or JavaScript instead of linking to a separate file. It's commonly used for small icons and background images in CSS via background-image: url("data:..."), avoiding an extra HTTP request.

URL-encoded (data:image/svg+xml,%3Csvg...) is usually 10–20% smaller than base64 for SVG specifically, because SVG is already text and only a handful of characters need escaping. Base64 is more universally recognized and safer when the SVG contains many special characters. Both are valid and supported by all modern browsers — this tool gives you both.

Yes. Both the base64 and URL-encoded data URIs work as the src of an <img> tag, as a CSS background-image, or inside url() in an @font-face or mask declaration.

Yes, base64 encoding adds roughly 33% overhead versus the raw file. For SVGs embedded directly in CSS or HTML this is usually still a net win because it eliminates a separate network request, but for large or frequently reused icons a real <img src="icon.svg"> or SVG sprite may load faster overall.

No. Encoding happens with the browser's built-in TextEncoder and btoa APIs (for base64) and encodeURIComponent (for the URL-encoded variant). Your SVG markup never leaves your device.

Make sure the input is valid SVG markup. If the SVG contains characters outside standard UTF-8 or is malformed, encoding may fail silently — try optimizing it first with the SVG optimizer to strip anything unusual.