waldemarfm / sass-svg-uri

Sass module to encode SVGs as an optimized data URI

sass-svg-uri

A Sass module with Jakob Eriksen's function to encode SVG markup into optimized data: URIs. Uses Hugo Giraudel's str-replace function to percent-encode characters that aren’t URL-safe.

As of version 2.0 this module only works with Dart Sass 1.33.0 and above.

Usage

Import the module and use the encode function.

@use "sass-svg-uri";

.icon {
  background-image: sass-svg-uri.encode(
    '<svg xmlns="http://www.w3.org/2000/svg"> ... </svg>'
  );
}

This would output:

.icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E% ... %3C/svg%3E");
}

To learn more:

• CSS-Tricks: Probably Don’t Base64 SVG
• Codepen: Optimizing SVGs in data URIs
• Introducing CSS Modules