Generated by SassMeister.com.

browserslist

> 1%
last 2 versions

SassMeister-input.scss

// ----
// libsass (v3.5.4)
// ----

// DEMO SVG: https://codepen.io/zastrow/pen/c32b7a3823ebdf7f4329e587a9ed7e1f

//  Helper function to replace characters in a string
@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);
}

// SVG URL fixer Icons by Taylor Hunt
// http://codepen.io/tigt/post/optimizing-svgs-in-data-uris
//  Function to create an optimized svg url
@function svg($svg) {
  //  Add missing namespace
  @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:'';
  $slice: 2000;
  $index: 0;
  $loops: ceil(str-length($svg) / $slice);
  @for $i from 1 through $loops {
    $chunk: str-slice($svg, $index, $index + $slice - 1);
    //   Encode
    $chunk: str-replace($chunk, '"', '\'');
    $chunk: str-replace($chunk, '%', '%25');
    $chunk: str-replace($chunk, '&', '%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');
    $chunk: str-replace($chunk, '=', '%3D');
    $chunk: str-replace($chunk, ':', '%3A');
    $chunk: str-replace($chunk, ';', '%3B');
    $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, '?', '%3F');
    $chunk: str-replace($chunk, '@', '%40');

    //    The maybe list
    //    Keep size and compile time down
    //    ... only add on documented fail
    $encoded: #{$encoded}#{$chunk};
    $index: $index + $slice;
  }
  @return url("data:image/svg+xml,#{$encoded}");
}

//  Helper function to replace characters in a string
@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);
}

.my-class {
  background-image: svg('<svg viewBox="0 0 200 200" height="200" width="200"><circle cx="64" cy="64" r="20" fill="gold" /><circle cx="100" cy="100" r="30" fill="deeppink" /><circle cx="150" cy="150" r="40" fill="dodgerblue" /></svg>
  ');
}

SassMeister-output.css

.my-class {
  background-image: url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A//www.w3.org/2000/svg' viewBox%3D'0 0 200 200' height%3D'200' width%3D'200'%3E%3Ccircle cx%3D'64' cy%3D'64' r%3D'20' fill%3D'gold' /%3E%3Ccircle cx%3D'100' cy%3D'100' r%3D'30' fill%3D'deeppink' /%3E%3Ccircle cx%3D'150' cy%3D'150' r%3D'40' fill%3D'dodgerblue' /%3E%3C/svg%3E\a   ");
}