https://github.com/waldemarfm/sass-svg-uri

Sass module to encode SVGs as an optimized data URI
https://github.com/waldemarfm/sass-svg-uri

css sass scss svg

Last synced: 15 days ago
JSON representation

Sass module to encode SVGs as an optimized data URI

• Host: GitHub
• URL: https://github.com/waldemarfm/sass-svg-uri
• Owner: waldemarfm
• Created: 2015-10-09T15:20:34.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2023-04-02T20:53:28.000Z (almost 2 years ago)
• Last Synced: 2025-01-07T19:27:49.716Z (about 1 month ago)
• Topics: css, sass, scss, svg
• Language: SCSS
• Homepage:
• Size: 65.4 KB
• Stars: 35
• Watchers: 3
• Forks: 11
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# sass-svg-uri

A Sass module with [Jakob Eriksen's](http://codepen.io/jakob-e/pen/doMoML) function to encode SVG markup into optimized `data:` URIs. Uses [Hugo Giraudel's str-replace function](http://sassmeister.com/gist/1b4f2da5527830088e4d) 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.

```scss

@use "sass-svg-uri";

.icon {

  background-image: sass-svg-uri.encode(

    ' ... '

  );

}

```

This would output:

```css

.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](https://css-tricks.com/probably-dont-base64-svg/)

- [Codepen: Optimizing SVGs in data URIs](http://codepen.io/Tigt/post/optimizing-svgs-in-data-uris)

- [Introducing CSS Modules](https://css-tricks.com/introducing-sass-modules/)