classicmike / sass-svg-uri

Sass function to encode SVG as a data uri without it being in base64. This is a fork off the original waldermarfm/sass-svg-uri repo with new sass integration.

SASS SVG URI

Description

NOTE: This is NOT my original work.

The intention of this repo is to port the original waldemarfm/sass-svg-uri to be supported in the Dart SASS implementation without it outputting any warnings and errors. The original repo is no longer being maintained from my understanding. Last commit was around 2015.

So what if I need to support SASS implementations before Dart SASS?

If you are after support for node-sass or SASS implementations before the Dart SASS implementation, please follow the link over here for the original waldemarfm/sass-svg-uri repository and the original sass-svg-uri npm package.

Original Description Text

This is just a simple module with Jakob Eriksen's function for easy use in projects. Uses Hugo Giraudel's str-replace function to replace invalid characters in the SVG as a data uri.

Usage

Just import the file and use the function, no dependencies.

@import "@classicmike/sass-svg-uri/svg-uri";

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

Would output:

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

To know more:

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