mini-svg-data-uri

What is mini-svg-data-uri?

The mini-svg-data-uri package is designed to convert SVG files into the most compact, URL-encodeable form. This is particularly useful for embedding SVG directly into web pages or CSS files without the need for additional HTTP requests. The package optimizes the SVG content for size and compatibility, making it an efficient choice for web developers looking to improve performance and reduce load times.

What are mini-svg-data-uri's main functionalities?

Convert SVG to Data URI

This feature allows you to convert an SVG string into a compact, URL-encodeable data URI. The code sample demonstrates how to use the package to convert a simple SVG circle into a data URI that can be embedded directly into HTML or CSS.

const svgToDataUri = require('mini-svg-data-uri');
const svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /></svg>';
const dataUri = svgToDataUri(svg);
console.log(dataUri);

Other packages similar to mini-svg-data-uri

svg-to-dataurl

This package offers similar functionality to mini-svg-data-uri by converting SVGs to data URLs. The main difference lies in the implementation details and the specific optimizations each package applies for converting SVGs into the most efficient data URI form.

url-loader

While primarily used in webpack environments, url-loader can convert files into data URIs. It's more general-purpose compared to mini-svg-data-uri, as it works with various file types, including SVGs. The comparison here is about the focus and optimization specifically for SVGs that mini-svg-data-uri offers.

README

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='http://www.w3.org/2000/svg' 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

Compare to the Base64 version (210 bytes):

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIH
ZpZXdCb3g9IjAgMCA1MCA1MCI+PHBhdGggZD0iTTIyIDM4VjUxTDMyIDMybDE5LTE5djEyQzQ0IDI2ID
QzIDEwIDM4IDAgNTIgMTUgNDkgMzkgMjIgMzh6Ii8+PC9zdmc+

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

data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%
2F2000%2Fsvg%22%20viewBox%3D%220%200%2050%2050%22%3E%3Cpath%20d%3D%22M22%2038V51
L32%2032l19-19v12C44%2026%2043%2010%2038%200%2052%2015%2049%2039%2022%2038z%22%2
F%3E%3C%2Fsvg%3E

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.

Usage

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

var svg = '<svg xmlns="http://www.w3.org/2000/svg" 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='http://www.w3.org/2000/svg' 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.

CLI

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

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

Use --help for more info.

Warning

• 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`
  <picture>
    <source srcset="${svgToMiniDataURI.toSrcset(svg)}">
    <img src="${svgToMiniDataURI(svg)}">
  </picture>`;
  

• 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 " instead.

FAQ

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