search

Found

info Overview

Encode SVG to a minimal percent-encoded data:image/svg+xml URI with paste-ready CSS url() snippet, base64 size comparison and fill color override.

📘 How to Use

  1. Paste SVG markup into the text area, or drop a .svg file into the drop zone
  2. Optionally override the fill color to produce color variants of the same icon
  3. Pick the outer quote style (double or single) that matches your CSS context
  4. Copy the data URI or the ready-made CSS url() snippet

SVG Data URI Encoder

Paste or drop an SVG to encode it.

Replaces every fill attribute inside the SVG before encoding. Leave empty to keep colors.

Copied!
Copied!
Original SVG
0 B
Data URI
0 B
Base64 variant
0 B

Enter SVG markup to see the size delta.

Rendered as a CSS background-image from the data URI.

grid_view Related

Article

SVG Data URI Encoder | CSS-Ready data URIs ~30% Lighter Than Base64

This tool converts an SVG into a data:image/svg+xml URI using minimal percent-encoding — only the characters that would break url(...) get escaped — and hands you a paste-ready background-image: url(...) snippet. Because base64 always inflates the byte count by ~33%, percent-encoding usually beats it by 20–35% on typical icons.

💡 About this tool

If you've ever wanted to embed a single SVG icon in CSS without pulling in a Webpack/Vite SVG loader, this is the path of least resistance. One fewer HTTP request, no flash of unstyled icon, and swapping the icon on :hover becomes a single CSS rule.

Base64 works too, but base64 is mechanically obligated to grow the payload by 33% (every 3 input bytes become 4 output chars). SVG is already text, so most of the markup is URL-safe as-is. The only characters that really need encoding are <, >, #, %, and whichever quote (" or ') collides with your outer url() wrapper. Yoksel's url-encoder for SVG popularized this approach back in the SVG-icon-inline era and the math hasn't changed.

The fill override is handy when you maintain a single-color icon (<svg ... fill="currentColor">) and want pre-baked color variants — say, a pink hover state and a mint active state — without writing the icon three times.

🧐 Frequently asked questions

Should I pick url("...") or url('...')? Single quotes are safer if you're embedding the URI inside PostCSS, Sass, or a JS template string that already uses doubles. For plain CSS the double-quote form has one less escape, which trims a few bytes.

Does the fill override also replace fill="currentColor"? Yes. It rewrites every fill= attribute it can find. If you want to preserve currentColor behavior, leave the override empty.

Can base64 ever come out smaller? Occasionally. SVGs with many < characters (deeply nested groups), heavy use of " in inline styles, or XML declarations and editor comments from tools like Sketch can swell the percent-encoded form past the 33% base64 overhead. Watch the size-comparison cards before committing.

Is the xmlns attribute really required? For background-image: url(...) consumption, yes. Browsers route the URI through an Image decode path that needs a proper namespace. The tool itself doesn't insert one; whatever you paste is what gets encoded.

What about icons larger than 256 KB? The file picker caps at 256 KB, but in practice anything beyond ~10 KB is usually a sign that the SVG should ship as a separate file. Inline payloads bloat your stylesheet and lose caching benefits.

📚 Fun facts

The "encode only the characters that actually break url()" trick was first widely shared in Yoksel's url-encoder around 2015–2016, when SVG icons were displacing icon fonts. Tailwind's arbitrary background-image syntax (bg-[url('data:image/svg+xml,…')]) is the modern descendant — same encoding, same one-file ergonomics, just with utility classes instead of hand-written stylesheets.