Generate background CSS rule with SVG as data URI using Sass

Highly likely you’ve heard of data URIs. It’s a way of including a resource inside your CSS. No extra separate HTTP request is then needed. The format that you use in a data URI can vary. Essentially you just tell it what content type it is (e.g. image/png), semicolon, then the data of that file.

Using svg as a background is great. However, preparing base64 encoded data to embed svg inside your CSS is a bit tricky. I have used Sass for that purpose thanks to https://gist.github.com/rniswonger/c4cf85fbbd50c5be4cbb7bd8087dc388. Here is the code:

// sass-lint:disable quotes

@function svg-url($svg) {
  @if not str-index($svg, xmlns) {
    $svg: str-replace($svg, "<svg", '<svg xmlns="http://www.w3.org/2000/svg"');
  }

  //  Chunk up string in order to avoid "stack level too deep" error

  $encoded: "charset=utf8";
  $slice: 2000;
  $index: 0;
  $loops: ceil(str-length($svg) / $slice);

  @for $i from 1 through $loops {
    $chunk: str-slice($svg, $index, $index + $slice - 1);

    // Encoding
    $chunk: str-replace($chunk, '"', "'");
    $chunk: str-replace($chunk, "%", "%25");
    $chunk: str-replace($chunk, "&#038;", "%26");
    $chunk: str-replace($chunk, "#", "%23");
    $chunk: str-replace($chunk, "{", "%7B");
    $chunk: str-replace($chunk, "}", "%7D");
    $chunk: str-replace($chunk, "<", "%3C");
    $chunk: str-replace($chunk, ">", "%3E");

    //
    //    The maybe list
    //
    //    Keep size and compile time down
    //    ... only add on documented fail
    //
    //  $chunk: str-replace($chunk, '|', '%7C');
    //  $chunk: str-replace($chunk, '[', '%5B');
    //  $chunk: str-replace($chunk, ']', '%5D');
    //  $chunk: str-replace($chunk, '^', '%5E');
    //  $chunk: str-replace($chunk, '`', '%60');
    //  $chunk: str-replace($chunk, ';', '%3B');
    //  $chunk: str-replace($chunk, '?', '%3F');
    //  $chunk: str-replace($chunk, ':', '%3A');
    //  $chunk: str-replace($chunk, '@', '%40');
    //  $chunk: str-replace($chunk, '=', '%3D');

    $encoded: #{$encoded}, #{$chunk};
    $index: $index + $slice;
  }

  @return url("data:image/svg+xml;#{$encoded}");
}

@mixin background-svg($svg) {
  background-image: svg-url($svg);
}

@function str-replace($string, $search, $replace: "") {
  $index: str-index($string, $search);

  @return if($index, str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace), $string);
}

Usage

The usage is pretty simple:

@include background-svg('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 240v224c0 8.832 7.168 16 16 16h144V224H16c-8.832 0-16 7.168-16 16z" fill="#1565c0"/><path d="M448 192H320V96c0-35.296-28.704-64-64-64h-48c-8.832 0-16 7.168-16 16v75.744l-61.888 108.32A15.763 15.763 0 00128 240v224c0 8.832 7.168 16 16 16h256.8c25.28 0 48.256-14.944 58.464-38.016l51.328-115.488A15.719 15.719 0 00512 320v-64c0-35.296-28.704-64-64-64z" fill="#bbdefb"/></svg>');

Sources

• Icon from freeicons.io
• Highly recommend tool SVGOMG! for SVG optimisations