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 only supports 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

2.0.0 (2023-04-02)

Features

• rewrite to sass module syntax (3a58422), closes #4

BREAKING CHANGES

• File is now a Sass module that exposes single encode function. See README for example. Dart Sass greater than 1.33.0 required.