Why percent encoding instead of Base64
SVG is text to begin with. Turning text into Base64 is pure loss.
| Percent encoding | Base64 | |
|---|---|---|
| Growth | 5–10% | A flat 33% |
| gzip | Compresses well | The repetition is destroyed, so barely |
| Changing a colour later | Find %23fff and edit it | Regenerate the whole thing |
| Git diff | Only the changed part shows | The entire line changes |
Double quotes become single quotes
One double quote costs three characters as %22. XML is just as happy with
single-quoted attributes, so they are swapped whenever no value contains a single quote itself.
On a typical icon that saves dozens of characters.
Use mask-image and CSS controls the colour
An icon used as a background image has its colour baked into the SVG, so you end up making one
file per colour. Use it as a mask instead and background-color becomes the icon
colour.
With currentColor it follows the text colour — which means never touching your
icons again for dark mode.
Without xmlns it will not render
An SVG loaded through a data URI is treated as a separate file from the document. The
xmlns you can omit when writing SVG inline in HTML is mandatory here. If it is
missing, it gets added and you are told so under the result.
How do I make it smaller still?
Run SVG Minify first. Clearing out editor metadata and six-decimal coordinates usually cuts it to under half, and what comes out of here is far shorter as a result.
What about SVGs with script or animation?
CSS animation (inside <style>) works. JavaScript does not — scripts never
run inside an image loaded from a data URI. An <image href="..."> pointing at
an external file will not load either.
Does it work in Internet Explorer?
IE cannot read percent-encoded SVG data URIs. If you still have to support it, choose Base64. Every current browser handles both.