Skip to content
ToolSuite
Developer Tools

SVG to Data URI

Convert an SVG into a data URI you can paste straight into CSS or an img tag.

Processed in your browser

Your result will appear here as soon as you add some input.

How to use it

  1. 1Paste your input into the input box, or type it directly.
  2. 2Adjust the options if you need something other than the defaults.
  3. 3The result updates as you type.
  4. 4Copy the result to your clipboard or download it as a file.

About the SVG to Data URI

URL encoding is typically 20-30% smaller than Base64 for SVG, because most of the markup needs no escaping at all. Only `<`, `>`, `#` and `%` actually have to be encoded, and double quotes are swapped for single ones so the URI can sit inside a CSS `url("…")`.

Inlining removes a request, which is worth it for small icons on the critical path. Past a couple of kilobytes a separate cacheable file wins, because an inlined icon is re-downloaded with every copy of the stylesheet.

Questions people ask

Is your code uploaded to a server?

No. This tool runs entirely in your browser using standard web APIs, so your code never leaves your device. You can confirm it by opening your browser's network panel while the tool runs, or by disconnecting from the internet after the page has loaded.

Is it free, and do I need an account?

Yes, it is free, and there is no account, no sign-up and no watermark on the result. The project is funded by optional donations.