SVG to Data URI

A data URI lets you embed an image directly inside your CSS or HTML instead of linking to a separate file. For small SVG icons this is a great trade: you remove an extra network request, the icon loads instantly with the page, and there is no flash of a missing image.

ToolHub SVG to Data URI converts your SVG markup into a ready-to-use data:image/svg+xml URI. It offers two encodings: a compact URL-encoded form that only escapes the characters that must be escaped, and a base64 form for tools that expect a single opaque token. You get a live preview, the raw data URI, and a copy-paste CSS snippet. Everything runs in your browser.

1. 1

   Paste SVG or upload a file

   Drop your SVG markup into the input box, or use the upload button to load a .svg file from your device.
2. 2

   Pick an encoding

   URL-encoded is smaller and stays human-readable. Base64 is a safe single-string fallback when a tool dislikes raw angle brackets.
3. 3

   Check the live preview

   The rendered SVG appears immediately so you can confirm the icon looks right before you ship it.
4. 4

   Copy the URI or CSS

   Grab the data URI for an img src, or copy the ready-made background-image snippet straight into your stylesheet.

SVG is just text, which means you do not have to base64 it like a PNG or JPEG. You can keep the markup readable and simply escape the few characters that would break a URI. This usually produces a smaller result than base64, which inflates data by about a third.

Why URL-encoding is often smaller

Base64 turns every 3 bytes into 4 characters, a fixed 33 percent overhead. URL-encoding only expands the characters that actually need escaping, such as <, >, #, and %. For typical icon SVGs the URL-encoded version wins on size, and it has the bonus of staying legible in your CSS.

How we keep it compact

The tool first collapses the whitespace between tags, then swaps double quotes for single quotes (which do not need escaping inside the URI) and encodes only the reserved characters. The result is a tidy data:image/svg+xml, URI with no wasted bytes.

When base64 still makes sense

Some build tools, email clients, or older browsers handle a single base64 blob more reliably than escaped markup. If a URL-encoded URI ever renders oddly, switch to the base64 tab and use data:image/svg+xml;base64, instead.

• Keep data URIs for small assets. Large or detailed SVGs are better as cached external files since an inlined copy cannot be cached separately.
• Prefer URL-encoded over base64 for CSS backgrounds. It is smaller and you can still read the markup.
• Minify the SVG before encoding. Removing editor metadata and extra whitespace shrinks the URI noticeably.
• Always wrap the URL value in quotes inside CSS, for example url("data:..."), so special characters never break parsing.
• Set explicit width and height (or a viewBox) on the SVG so it renders at a predictable size when inlined.

Why is my URL-encoded URI smaller than base64?

Because base64 adds a flat 33 percent overhead to everything, while URL-encoding only escapes a handful of reserved characters. For text formats like SVG, escaping is usually the leaner choice.

The preview is blank. What went wrong?

Make sure your markup contains a real <svg> root with an xmlns attribute. A missing namespace or a syntax error will stop the browser from rendering it.

Can I use this in an img tag?

Yes. Copy the data URI and set it as the src of an img element. Both the URL-encoded and base64 forms work as an image source.

Does inlining hurt performance?

For small icons it usually helps by removing a request. For large graphics it can hurt, because the bytes ride along on every page that uses the stylesheet and cannot be cached on their own. Inline small, link large.