Should I use URL-encoded or Base64 for an SVG data URI?

URL-encoding is usually the better choice for SVG. It keeps the markup readable and is typically smaller than Base64, which inflates the payload by about 33 percent. Use Base64 only when a tool or context does not accept the URL-encoded form.

Why put an SVG in a data URI instead of a file?

Inlining a small SVG as a data URI removes an HTTP request, which can speed up rendering for icons and background patterns. It also keeps the asset self-contained inside your CSS. For large SVGs a separate cached file is usually better.

Is my SVG uploaded anywhere?

No. The conversion happens entirely in your browser with JavaScript. The SVG markup you paste never leaves your device.

Why does the tool replace double quotes with single quotes?

Inside a CSS url("data:...") value the outer quotes are double, so the SVG attributes are converted to single quotes to avoid breaking the string. This is standard practice for inline SVG data URIs.

What is the SVG to Data URI Converter?

Free SVG to data URI converter. Paste SVG markup and get an optimized URL-encoded data URI and a Base64 version, each with a ready-to-paste CSS background-image rule and a byte-size comparison. Runs entirely in your browser — nothing is uploaded. It runs free in your browser on Gera Tools, with nothing uploaded.

SVG to Data URI Converter

Name: SVG to Data URI Converter
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

Get one useful tool a week

Like this tool? Enter your email and we'll send you one genuinely useful Gera tool a week — plus a link to come back to this one. No spam, one-click unsubscribe any time.

Small SVG icons and background patterns are often best inlined directly into your CSS as a data URI, removing an extra network request. This converter takes raw SVG markup and produces both encodings — an optimized URL-encoded data URI and a Base64 one — with the byte size of each so you can pick the smaller.

URL-encoded vs Base64

URL-encoded : data:image/svg+xml,%3Csvg ... %3E   (smaller, readable)
Base64      : data:image/svg+xml;base64,PHN2Zy...  (~33% larger)

For almost every SVG the URL-encoded form is smaller because SVG is text and Base64 always adds roughly a third to the size. The tool escapes only the characters that would break inside a url("...") value — <, >, #, %, and the braces — and converts double quotes to single quotes so the string is safe to drop into a stylesheet.

Using the result

.icon {
  background-image: url("data:image/svg+xml,%3Csvg .../%3E");
  background-repeat: no-repeat;
}

Copy the CSS rule button gives you exactly this, ready to paste. Everything runs locally in your browser — the SVG you paste is never uploaded.

When not to inline

Inlining is a win for small icons and repeating patterns. For large, detailed SVGs — or any SVG reused across many pages — a separate file that the browser can cache once is usually the better choice, since an inlined data URI is re-downloaded with every stylesheet that contains it.