svgby garagemade

Convert an SVG to a data URI

svgby garagemade
0,0browser-local
Drop an SVG to start
or pick a sample on the home page
Open in the full editor

A data URI lets you inline an SVG directly in CSS or HTML, with no separate file and no extra request. This converts the SVG above into a data: string — URL-encoded by default, because that's smaller for SVG, or base64 when you need it. The conversion runs in your browser, so the file never leaves your machine.

How to convert an SVG to a data URI

  • Load your SVG above, or edit the sample. It stays in your browser.
  • Open the Code tab and choose Data URI.
  • Keep URL-encoded for the smallest string, or switch to base64.
  • Copy the string straight into your CSS or HTML.

Where an inline SVG fits

  • A CSS background — background: url("data:image/svg+xml,…") — the classic case, with no HTTP request for the icon.
  • An <img src='data:…'> or a mask-image.
  • Design tokens and CSS-in-JS, where the icon lives beside the styles that use it.

URL-encoded vs. base64

URL-encoding percent-escapes only the characters that would break the URI and leaves the rest readable, so for an SVG it is meaningfully smaller than base64 — which is why it's the default here. Base64 wraps the whole file in an ASCII envelope: larger, but a handful of contexts prefer it, so toggle to base64 when URL-encoded doesn't take. Either way the inline svg renders identically; the choice is about size and compatibility, not appearance.

Frequently asked questions

Should I URL-encode or use base64?
For SVG, URL-encoding produces a smaller string than base64, so it's the default. Reach for base64 only where a context rejects the reserved characters.
Where do I paste the string?
Into a CSS background url(), an img src, or a mask-image. The whole data: string is the source — nothing else is needed.
Why is base64 sometimes needed?
A few pipelines — certain email clients and some build steps — handle base64 more predictably than percent-encoded markup. When URL-encoded breaks, switch to base64.
Does encoding change my SVG?
No. It wraps the SVG as-is into a data: string; the markup and the way it renders are unchanged.
Should I inline every SVG this way?
Inlining removes a request and suits small icons. For large or repeated artwork, a shared file usually caches better across pages.
Do you upload my SVG?
No. The encoding runs in your browser; the SVG is never sent anywhere or stored.
Is it free?
Yes. No signup, no watermark.

Related conversions