URL Encoder for SVG: Inline SVG in CSS Without Base64

Why not Base64

Base64 inflates every asset by a third and turns text into an opaque blob that gzip cannot compress well. For a binary PNG that trade is unavoidable; for SVG markup it is pure loss.

A URL-encoded SVG typically ends up 20-30% smaller than the Base64 form before compression, and considerably smaller after — because the markup still contains repeated strings that gzip recognises.

What to encode

You do not need full percent-encoding. Only the characters that would break the CSS url() or the data URI need escaping:

.icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h12' stroke='%23333' stroke-width='2'/%3E%3C/svg%3E");
}

The essentials: < becomes %3C, > becomes %3E, # becomes %23 (critical — an unescaped # starts a fragment and truncates the image), and % becomes %25.

Use single quotes inside the SVG and double quotes around the url(), and you avoid escaping quotes entirely. Newlines should be removed or encoded as %0A.

The colour trap

Hex colours are where this most often goes wrong. fill="#333" unescaped cuts the data URI at the #, and the icon silently disappears — no console error, just nothing rendered.

Always write %23333. If an inline SVG works in an <img> but vanishes as a CSS background, an unescaped # is the first thing to check.

When to use a file instead

Inline data URIs cannot be cached separately and are re-downloaded with every stylesheet. For a handful of small icons that is a good trade; for a large illustration or an icon set it is not.

Past a few kilobytes, or when the same icon appears in several stylesheets, a real .svg file with proper cache headers wins.