SVG to Base64 Converter — Free SVG Data URI Generator

How to use the SVG to Base64 converter

1. Paste your SVG markup into the input, or click Upload .svg to load a file up to 2MB.
2. The tool validates that the markup contains a closed <svg>…</svg> element and shows a clear error if not.
3. Read the three outputs: URL-encoded, Base64, and a ready-made CSS background-image rule.
4. Compare the byte sizes under each panel; the smaller form is tagged Smaller (usually the URL-encoded one).
5. Press Copy on the form you want and paste it into your img src, CSS url(), or JS string.

What is an SVG data URI and how does it work?

A data URI (data URL) inlines a resource directly inside a URL using the form data:[<mediatype>][;base64],<data>. For SVG the mediatype is image/svg+xml. You can encode the payload one of two ways, both documented in the MDN data URIs reference: Base64 (binary-safe but always larger) or percent-encoded text.

Base64 reads 3 bytes at a time and emits 4 ASCII characters, padding the tail with =. That 4:3 ratio is exactly why Base64 output is about 33% larger than the source. SVG, however, is already text, so it does not need binary-safe encoding. Per MDN, URL-encoding an SVG is the recommended approach because escaping only the reserved characters typically yields a shorter string than Base64. This tool builds the Base64 form with the browser's non-secure btoa function, wrapped so UTF-8 text (emoji, accents, CJK) encodes without error.

The MDN Web Docs guidance on data URIs makes the practical call: if your SVG file is large, link to it directly as a separate file instead of inlining it; if it is small, a URL-encoded data URI will usually come out smaller than the Base64 form.

Worked examples: SVG → data URI

SVG data URI reference: forms and size

All three outputs share the image/svg+xml mediatype; they differ only in how the payload is encoded and how much it grows. Use this to pick a form at a glance.