About the SVG to Data URI Converter
What is this tool?
This tool turns SVG markup into a data URI — a single string you can drop into CSS or HTML instead of hosting the icon as a separate file. Paste your SVG (or open a file), and you get both encodings at once: the URL-encoded version, which only escapes the handful of characters that actually break CSS, and the Base64 version. A size comparison tells you which one is smaller for your particular SVG, and ready-made CSS background-image and img tag snippets are one copy-click away.
Details that usually bite people are handled for you. The Base64 encoder is unicode-safe, so an SVG containing accented text or special symbols converts correctly instead of throwing an error. Whitespace and line breaks are collapsed before encoding (a raw newline inside a CSS url() silently kills the rule), and a live preview renders your SVG so you can confirm the markup is valid before you paste it anywhere. Everything runs in your browser; your files never leave your device.
How to Use This Tool
- Add your SVG. Paste the code into the editor or click Open SVG file.
- Check the preview. If the image renders, the markup is valid; if not, you will get an error instead of a broken string.
- Compare the sizes. The chip above the outputs tells you exactly how many characters URL-encoding saves over Base64 for this SVG — it is almost always the winner.
- Copy a snippet. Take the bare URI, or the finished CSS background-image rule or HTML img tag.
Common Use Cases
Where inlined SVGs earn their keep:
- CSS icons: arrows, chevrons and bullets in a stylesheet with zero extra requests.
- Custom form controls: select dropdown arrows and checkbox ticks are classically done with SVG data URIs, since pseudo-elements cannot load external files everywhere.
- Single-file pages: emails, reports and offline documents where every asset must live in the one file.
- Framework styles: styled-components and CSS-in-JS setups where a separate asset pipeline is more trouble than it is worth.
- Related tools: shrink the SVG first with the SVG optimizer, inline raster images with the image to Base64 converter, or bundle many icons with the SVG sprite generator.
Frequently Asked Questions
What is a data URI?
A data URI is a way of writing a whole file inside a URL, so the browser reads the content directly from the string instead of fetching a separate file. For an SVG it looks like data:image/svg+xml followed by the encoded markup, and it works anywhere a normal image URL does: CSS backgrounds, img tags, even favicons.
URL-encoded or Base64 — which should I use for SVG?
URL-encoded, almost always. SVG is text, so it only needs a few characters escaped, while Base64 inflates everything by a third and also compresses worse under gzip. This tool shows both sizes side by side, so you never have to guess — but do not be surprised when URL-encoded wins every time.
How do I use the data URI in CSS?
Put it inside url() as a background-image, wrapped in double quotes. The tool generates the complete rule for you — copy the CSS background-image snippet and paste it into your stylesheet. Because the encoder converts inner double quotes to single quotes, the string is safe inside the quoted url().
Why does my SVG data URI break in CSS?
The classic causes are an unescaped hash in a color like #fff, raw angle brackets, or a literal line break inside url() — any of these ends the CSS rule early. This tool escapes all of them and collapses line breaks before encoding, which is exactly why hand-pasting raw SVG into url() fails but the converted string works.
Does this work with SVGs that contain text or unicode?
Yes. The Base64 encoder works on the UTF-8 bytes of your markup, so accented characters, symbols and non-Latin text convert correctly. Naive converters that call the browser encoding function directly throw an error on any character outside Latin-1 — that does not happen here.
Should I inline every SVG as a data URI?
No. Inlining pays off for small, frequently used decorations because it saves a request, but the string lives inside your CSS and cannot be cached as a separate asset. For large illustrations, or icons reused across many stylesheets, a normal .svg file or a sprite is the better call.
Is my SVG uploaded to your server?
No. The encoding runs entirely in your browser with JavaScript, and the preview is rendered locally too. Nothing you paste or open is uploaded, logged or stored.