What the SVG Data URI Converter does
This converter turns SVG markup into a data:image/svg+xml URI you can paste into CSS or HTML. It produces both the URL-encoded form and the Base64 form, tells you which is shorter, and writes the ready-to-paste background-image declaration and an <img> tag. Paste an existing data URI instead and it decodes it back to markup.
Before encoding, scripts, on... event handlers and external references are removed, and editor metadata and whitespace can be stripped. The preview is drawn from the encoded URI itself, so what you see is what the browser will render. Nothing is uploaded.
How to use it
- Paste SVG markup, drop an .svg file (up to 2 MB), or paste a
data:image/svg+xmlURI or a wholeurl(...)value to decode it. - Keep 'Remove comments, editor metadata and whitespace' on unless you need the markup byte for byte.
- Read the notes: a missing
xmlnsstops the URI rendering at all, and a missingviewBoxstops it scaling. - Copy the CSS background line, the raw URI or the
<img>tag. The URL-encoded form is usually the one to use.
Reading the results
The URL-encoded URI keeps the SVG readable and only percent-encodes the characters that break a URI or a CSS url(): <, >, #, %, braces, control characters and non-ASCII text. Double quotes become single quotes so the whole value can sit inside url("...").
The Base64 URI encodes every 3 bytes as 4 characters, so it is about a third larger than the SVG and compresses worse with gzip. It is shorter only when the markup is dominated by characters that need percent-encoding, such as long runs of non-Latin text.
Sizes are UTF-8 bytes of the URI itself. Inside a stylesheet that is served compressed, the difference between the two forms usually grows in favour of URL encoding.
Worked example: A 136-byte chevron icon
The minified chevron <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#1f2937" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg> is 136 bytes.
URL-encoded, the three < become %3C, the three > become %3E and the # becomes %23: 7 characters that each grow by 2, so 136 + 14 = 150, plus the 19-byte prefix data:image/svg+xml, gives 169 bytes.
Base64 turns 136 bytes into ceil(136 / 3) x 4 = 184 characters, plus the 26-byte prefix data:image/svg+xml;base64,, giving 210 bytes. The URL-encoded form is 41 bytes shorter and stays readable.
Formulas and scoring rules
- Base64 length
26 + 4 x ceil(svgBytes / 3)26 is the length of data:image/svg+xml;base64,- URL-encoded length
19 + svgBytes + 2 x (number of single-byte characters percent-encoded) + growth of multi-byte characters19 is the length of data:image/svg+xml, - a character outside ASCII becomes 3 characters per UTF-8 byte.
Limitations: what the result does not prove
- A data URI cannot be cached separately from the file that contains it. For an icon used on many pages, or anything over a few kilobytes, a normal file or a sprite is usually better.
- An SVG used as an image cannot load external fonts, images or stylesheets, and does not inherit
currentColorfrom the page. Colours must be written into the SVG. - Sanitising removes the common ways SVG runs code or fetches resources, but it is not a guarantee for hostile files; review third-party SVG before shipping it.
- Some old email clients and tools do not support SVG data URIs at all; test in the places the code will actually run.
Privacy: where your data goes
Everything you paste, type or drop is processed in this browser tab. It is not uploaded, logged, stored or sent to analytics. Session recording and tag-manager scripts are switched off on this page.
Standards and sources
- RFC 2397 - The data URL scheme - checked 19 Sep 2026
- IETF - RFC 3986, URI generic syntax (percent-encoding)
- MDN - data: URLs
- W3C - SVG 2, Document structure (namespace)
Frequently asked questions
Should I use Base64 or URL encoding for an SVG in CSS?
Usually URL encoding. SVG is text, so percent-encoding only the few unsafe characters keeps it shorter than Base64, which always adds about 33 percent, and it compresses better. The tool shows both sizes so you can check your own file.
Why does my SVG data URI show nothing?
The most common cause is a missing xmlns="http://www.w3.org/2000/svg" on the root element. Inline SVG in HTML works without it, but a data URI is a separate document and must declare the namespace. An unencoded # in a colour such as #fff is the second common cause, because it starts a URL fragment.
Why does the output use single quotes instead of double quotes?
CSS url() values are normally wrapped in double quotes. Switching the SVG's attribute quotes to single quotes means they do not need escaping, which keeps the URI shorter and readable. If the SVG already contains single quotes, the double quotes are kept and percent-encoded instead.
Can I change the colour of an SVG background with CSS?
Not from the page: an SVG loaded as an image is isolated, so currentColor and page styles do not reach it. Either write the colour into the SVG and generate one URI per colour, or use the SVG as a CSS mask-image and colour the element with background-color.
How do I turn a data URI back into an editable SVG file?
Paste the URI, or the whole url("...") value from your stylesheet, into the input. The tool detects the data: prefix, decodes percent-encoding or Base64, and shows the markup under 'Cleaned SVG markup' with a download button.
Is there a size limit for data URIs?
Current browsers accept very large data URIs, but large ones make stylesheets slower to download and parse, and cannot be cached on their own. As a rule of thumb, keep them to small icons and patterns; this tool refuses inputs over 2 MB.
Last reviewed by the A2Z.Tools team against the sources listed above.
