SVG to Base64 & Data URI Converter

Get a data URI in both encodings and copy it as CSS, HTML or raw. The URL-encoded form is usually smaller than base64 for SVG.

Loading the SVG to Base64 tool…

Processed on your device. Files are never uploaded.

How to use the SVG to Base64 tool

  1. Paste SVG code or drop a file.

  2. Compare base64 and URL-encoded sizes; optionally optimize first.

  3. Copy the CSS, <img> or raw data URI.

Base64 or URL-encoding?

Base64 inflates any data by a third (every 3 bytes become 4 characters). SVG is already text, so percent-encoding only the few unsafe characters (<, >, #, quotes) keeps it close to its original size and also gzips better. Use base64 only when a tool insists on it.

When to inline an SVG

Inlining saves an HTTP request, which helps for tiny icons used in CSS. For anything over a few kilobytes, or used on many pages, a separate cached file is better.

Questions

How do I use an SVG as a CSS background?

Copy the CSS snippet: background-image: url("data:image/svg+xml,…"). Wrap the value in double quotes, since the encoded SVG uses single quotes.

Can I decode a base64 SVG?

Yes. Paste a data:image/svg+xml;base64,… string into the input and it is decoded back to SVG code.

Why is my data URI not showing?

The usual cause is an unescaped # (from hex colours) in a URL-encoded URI. The encoder here escapes it as %23.