Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time
May 11, 2021 11:15
July 2, 2019 19:23

Mini SVG data: URI

This tool converts SVGs into the most compact, compressible data: URI that SVG-supporting browsers tolerate. The results look like this (169 bytes):

data:image/svg+xml,%3csvg xmlns='' viewBox='0 0 50 50'
%3e%3cpath d='M22 38V51L32 32l19-19v12C44 26 43 10 38 0 52 15 49 39 22 38z'/%3e

Compare to the Base64 version (210 bytes):


Or the URL-encoded version other tools produce (256 bytes):


For a more realistic example, I inlined the icons from the Open Iconic project into CSS files with the 3 above methods:

Compression Base64 Basic %-encoding mini-svg-data-uri
None 96.459 kB 103.268 kB 76.583 kB
gzip -9 17.902 kB 13.780 kB 12.974 kB
brotli -Z 15.797 kB 11.693 kB 10.976 kB

Roughly 6% smaller compressed, but don't write off the ≈20% uncompressed savings either. Some browser caches decompress before store, and parsing time/memory usage scale linearly with uncompressed filesize.


var svgToMiniDataURI = require('mini-svg-data-uri');

var svg = '<svg xmlns="" viewBox="0 0 50 50"><path d="M22 38V51L32 32l19-19v12C44 26 43 10 38 0 52 15 49 39 22 38z"/></svg>';

var optimizedSVGDataURI = svgToMiniDataURI(svg);
// "data:image/svg+xml,%3csvg xmlns='' viewBox='0 0 50 50'%3e%3cpath d='M22 38V51L32 32l19-19v12C44 26 43 10 38 0 52 15 49 39 22 38z'/%3e%3c/svg%3e"

You can also try it in your browser at RunKit.


If you have it installed globally, or as some kind of dependency inside your project’s directory:

mini-svg-data-uri file.svg # writes to stdout
mini-svg-data-uri file.svg file.svg.uri # writes to the given output filename

Use --help for more info.


  • This does not optimize the SVG source file. You’ll want svgo or its brother SVGOMG for that.

  • The default output does not work inside srcset attributes. Use the .toSrcset method for that:

    var srcsetExample = html`
      <source srcset="${svgToMiniDataURI.toSrcset(svg)}">
      <img src="${svgToMiniDataURI(svg)}">
  • The resulting Data URI should be wrapped with double quotes: url("…"), <img src="…">, etc.

  • This might change or break SVGs that use " in character data, like inside <text> or aria-label or something. Try curly quotes (“”) or &quot; instead.


Don’t you need a charset in the MIME Type?

charset does nothing for Data URIs. The URI can only be the encoding of its parent file — it’s included in it!

Why lowercase the URL-encoded hex pairs?

It compresses slightly better. No, really. Using the same files from earlier:

Compression Uppercase (%AF) Lowercase (%af)
gzip -9 12.978 kB 12.974 kB
brotli -Z 10.988 kB 10.976 kB

I did say slightly.

Browser support

  • Internet Explorer 9 and up, including Edge
  • Firefox, Safari, Chrome, whatever else uses their engines
  • Android WebKit 3+
  • Opera Mini’s server-side Presto