SVG to Data URI
Encode SVG markup as a data URI for CSS, HTML or JSX. Three encodings side by side — minimal escaping, full URL encoding and Base64 — with the byte size of each measured on your own file, a live preview, and xmlns checks.
SVG Input
Drag and drop your SVG files here, or click to select (max 5 files)
Encoding
Encode
Encoding runs entirely in your browser — nothing is uploaded. Switching encoding or the clean-up toggle re-renders the results instantly, no re-encode needed.
Results will appear here
Paste SVG markup or upload .svg files to start
About SVG Data URIs
Which encoding is actually smallest?
- • Minimal escaping — escapes only
% # < > { } ( ) ", newlines and non-ASCII. Typically ~20% smaller than base64 for icon markup. - • Full URL encoding —
encodeURIComponentalso escapes spaces,/,:,=,,,;. Usually ~20% larger than base64, so it is a compatibility fallback, not an optimisation. - • Base64 — a fixed +33% over the raw bytes, but never needs escaping and is accepted everywhere.
The xmlns trap
Inline in HTML the browser infers the SVG namespace, so a namespace-less SVG looks fine in the page. A data URI is parsed as a standalone XML document — without xmlns="http://www.w3.org/2000/svg" it renders nothing at all. Same for a xlink: prefix with no xmlns:xlink declaration.
When embedding is worth it
- • Small UI icons under ~2 KB used in CSS (arrows, checkmarks, chevrons)
- • Critical above-the-fold graphics inlined into critical CSS
- • Self-contained HTML exports and email templates
- • Not worth it for large or repeated graphics — a cached .svg file wins
What breaks after embedding
- • External
<image href>,@importand web fonts — a data URI has no base URL - • Scripts and CSS
:hoverfrom the host page — an embedded SVG is an isolated, inert document - •
currentColor— it resolves against the SVG document, not your page - • Caching — the bytes ride along with every copy of the stylesheet or markup
Workflow tip
Run the file through the SVG Optimizer first — the clean-up here is deliberately conservative (whitespace, comments, prolog and metadata only). SVGO also trims path precision and redundant attributes, which shrinks the encoded output further.
About SVG to Data URI
This tool turns SVG markup into a data URI you can paste straight into CSS, HTML or JSX. It offers the three encodings that matter — minimal escaping (the yoksel/SVGOMG approach, which escapes only the characters that actually break a URI), full encodeURIComponent, and Base64 — and reports the measured byte size of each for your specific file instead of quoting a rule of thumb. A conservative clean-up pass strips the XML prolog, DOCTYPE, comments and metadata and collapses whitespace between tags, while leaving text, style and script content untouched.
Why use a SVG to Data URI?
Embedding a small SVG removes an HTTP request and guarantees the graphic is present the moment the stylesheet parses — useful for UI icons and anything in the critical rendering path. But the encoding you pick changes the payload by 40% either way, and a namespace-less SVG that renders perfectly inline silently renders nothing as a data URI. Seeing the three encodings measured, plus a live preview of the URI itself, makes both traps visible before the string reaches production.
Who is it for?
Front-end developers inlining icons into CSS, performance engineers trimming render-blocking requests, design-system maintainers packaging icon sets, and anyone debugging a data URI that renders as a broken image in one browser and fine in another.
How to use the tool
Paste your SVG markup into the text area, or upload up to five .svg files with the picker or drag-and-drop
Leave 'Clean up before encoding' on to strip the XML prolog, DOCTYPE, comments and metadata before encoding
Pick an encoding: minimal escaping (smallest for SVG), full URL encoding, or Base64
Click Encode to Data URI
Check the live preview — it renders the data URI itself through an img element, so a blank box means the URI does not work
Read the warnings: a missing xmlns can be injected with one click, and external references are listed because they stop resolving once embedded
Compare the measured size table for all three encodings on your actual file, not on a rule of thumb
Copy the raw data URI, the CSS background-image rule, the img tag or the JSX snippet — or download the result as .txt or .css
Frequently Asked Questions
How do I convert an SVG to a data URI?
Paste the SVG markup into the text area, or drop up to five .svg files onto the upload area, then press Encode to Data URI. The tool cleans the markup (prolog, DOCTYPE, comments, metadata, whitespace between tags), percent-encodes or Base64-encodes it, and prints four copyable forms: the bare data URI, a CSS background-image rule, an img tag and a JSX snippet. Everything runs in your browser, so the result is instant and nothing is uploaded. The live preview renders the data URI itself, which is the fastest way to confirm the string actually works before you paste it into a stylesheet.
Is URL encoding really smaller than Base64 for SVG?
Only the minimal form is. Measured on a 346-byte stroke icon: minimal escaping produced a 348-byte data URI, Base64 produced 438 bytes, and full encodeURIComponent produced 522 bytes — so minimal is about 20% smaller than Base64 while full URL encoding is about 20% LARGER. The reason is which characters get escaped. encodeURIComponent turns every space, /, :, =, , and ; into three bytes, and SVG markup is full of them. Minimal escaping touches only % # < > { } ( ) " newlines and non-ASCII, leaving the rest as readable text. The widely repeated '30-40% smaller than Base64' claim only holds for the minimal form.
Is my SVG uploaded to a server?
No. Encoding is a deterministic text transformation and runs entirely in your browser via JavaScript — your SVG never reaches a server and is never logged. Verify it in DevTools' Network tab: pressing Encode issues zero HTTP requests, and the page keeps working with the network disabled. That makes the tool safe for unreleased brand marks, internal product icons and client work under NDA. The live preview is equally local: it renders the data URI through an img element, which cannot execute scripts or fetch anything from inside the SVG.
Why does my data URI show nothing while the same SVG works inline?
Almost always a missing xmlns. When SVG markup sits directly in an HTML document, the HTML parser puts it in the SVG namespace for you, so xmlns="http://www.w3.org/2000/svg" is optional. A data URI is parsed as a standalone XML document, where that attribute is mandatory — without it the document is not an SVG and the browser renders nothing, usually with no console error. The same applies to xlink: attributes used without an xmlns:xlink declaration, which makes the document malformed XML. This tool flags both cases and can inject the declarations with one click.
When should I embed an SVG instead of linking the file?
Embed small, single-use graphics that are on the critical path: UI icons in CSS (chevrons, checkmarks, select arrows), a logo inlined into critical CSS so it paints without a second request, and self-contained HTML exports or email templates that must work offline. Link the file when the graphic is large, reused across pages, or likely to change — a separate .svg is cached independently, while an embedded one is re-downloaded with every copy of the stylesheet or HTML document that contains it. The practical crossover sits around 1-2 KB of SVG source.
What breaks once an SVG becomes a data URI?
Four things, in order of how often they bite. External references — an image or use element pointing at a URL, an @import, a web font — have no base URL to resolve against and, in img and CSS background contexts, no network access at all. Scripts never execute in those contexts. currentColor resolves against the embedded document rather than your page, so an icon you expected to inherit text colour will not. And CSS from the host page cannot reach inside, so hover and theme rules stop applying. The tool lists external references it finds before you embed.
Should the URI start with image/svg+xml, or image/svg+xml;utf8?
This tool emits data:image/svg+xml,... because it is the correct form: after the media type, a semicolon introduces a parameter, and the only defined ones are attribute=value pairs such as charset=utf-8 plus the bare base64 marker. The ;utf8, spelling seen in many snippets is not a valid parameter — browsers tolerate it because their data-URL parser ignores unrecognised tokens, but it buys nothing. Non-ASCII characters are percent-encoded as UTF-8 bytes in every encoding here, so the payload is unambiguous without any charset parameter at all.
How do I make the encoded output as small as possible?
Optimise first, encode second. Run the file through the [SVG Optimizer](/tools/svg-optimizer/), which trims path precision, removes redundant attributes, collapses groups and drops hidden elements — reductions this tool deliberately does not attempt, because its clean-up is limited to whitespace, comments, prolog and metadata so it can never alter rendering. Then choose minimal escaping here. For a typical optimised 24px icon that lands within a few percent of the raw source size. If the result still runs past a few kilobytes, an external .svg with cache headers, or an SVG sprite referenced by id, beats embedding.
Share This Tool
Found this tool helpful? Share it with others who might benefit from it!
💡 Help others discover useful tools! Sharing helps us keep these tools free and accessible to everyone.