SASS mixin that optimizes the svg markup to a background style.

_svg-optimized.scss

//  Optimize svg text               --> http://petercollingridge.appspot.com/svg-optimiser
//  Helpfule Article                --> https://css-tricks.com/using-svg
//  Credit where credit is due      --> https://codepen.io/jakob-e/pen/doMoML
//  SVG Alignment and Aspect Ratio  --> http://tutorials.jenkov.com/svg/svg-viewport-view-box.html

//  Function to create an optimized svg url
//  Version: 1.0.6 (plus my changes)
@mixin svg($svg){
  width: 100%;
  height: 100%;
  background: svg-optimized($svg) no-repeat top left;
}

@function svg-optimized($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, '#', '%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, '&', '%26');
    //  $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}");
}

//  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);
}

how-to-use-svg-mixin.scss

@import "./_svg-optimized.scss";

.logo {
  @include svg("<svg> ... </svg>"); //use " or ' depending on your string.
}

If you want to bring it in via npm: https://github.com/christo8989/svg-optimized