Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="demo"></div>

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

// -------------------------------------------------------------------------
// Strip Unit (supports maps)
// http://stackoverflow.com/a/12335841/673457
// -------------------------------------------------------------------------
@function strip($arg) {
  // If map was passed, convert each value
  @if type-of($arg) == "map" {
    @each $key, $value in $arg {
      $arg: map-merge( $arg, ($key: strip($value)) );// Recursion FTW!
    }
    @return $arg;
  }

  // Return if valid number
  @else if type-of($arg) == 'number' {
    @return ($arg / ($arg * 0 + 1));
  }

  // Warn if not a valid number
  @else {
    @error "🔴  strip(#{inspect($arg)} is not a valid number";
  }
}

//------------------------------------------------------------------------
// Hugo's String Replace Function
//
// Replace `$search` with `$replace` in `$string`
// @param {String} $string - Initial string
// @param {String} $search - Substring to replace
// @param {String} $replace ('') - New value
// @return {String} - Updated string
//
// Source: @HugoGiraudel, http://sassmeister.com/gist/1b4f2da5527830088e4d
// Blog post: http://hugogiraudel.com/2014/01/13/sass-string-replacement-function/
//
// I have written a lot of different `str-replace` Sass functions over
// the months yet none of my tries were succeeding in making the new substring
// able to contain the one to replace (e.g. `str-replace($str, "a", "ab")`).
// Thanks to Valérian Galliat (@valeriangalliat), I finally managed to build
// a bulletproof `str-replace` Sass function that allows new string to contain
// the old one.
//
//
// Example:
// str-replace("abcde", "bc", "a") => "aade"
//------------------------------------------------------------------------
@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);

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

  @return $string;
}

//------------------------------------------------------------------------
// URL Encode String
//
// Dependencies: strip(), str-replace()
//
// Author: @tedmw
//------------------------------------------------------------------------
$symbol-map: (
  " ": "%20",
  "\"": "%22",
  "%": "%25",
  "<": "%3C",
  ">": "%3E",
  "\\": "%5C",
  "^": "%5E",
  "`": "%60",
  "{": "%7B",
  "|": "%7C",
  "}": "%7D",
  "‚": "%E2%80%9A",
  "ƒ": "%C6%92",
  "„": "%E2%80%9E",
  "…": "%E2%80%A6",
  "†": "%E2%80%A0",
  "‡": "%E2%80%A1",
  "ˆ": "%CB%86",
  "‰": "%E2%80%B0",
  "Š": "%C5%A0",
  "‹": "%E2%80%B9",
  "Œ": "%C5%92",
  "Ž": "%C5%BD",
  "‘": "%E2%80%98",
  "’": "%E2%80%99",
  "“": "%E2%80%9C",
  "”": "%E2%80%9D",
  "•": "%E2%80%A2",
  "–": "%E2%80%93",
  "—": "%E2%80%94",
  "˜": "%CB%9C",
  "™": "%E2%84",
  "š": "%C5%A1",
  "›": "%E2%80",
  "œ": "%C5%93",
  "": "%9D",
  "ž": "%C5%BE",
  "Ÿ": "%C5%B8",
  "¡": "%C2%A1",
  "¢": "%C2%A2",
  "£": "%C2%A3",
  "¤": "%C2%A4",
  "¥": "%C2%A5",
  "¦": "%C2%A6",
  "§": "%C2%A7",
  "¨": "%C2%A8",
  "©": "%C2%A9",
  "ª": "%C2%AA",
  "«": "%C2%AB",
  "¬": "%C2%AC",
  "®": "%C2%AE",
  "¯": "%C2%AF",
  "°": "%C2%B0",
  "±": "%C2%B1",
  "²": "%C2%B2",
  "³": "%C2%B3",
  "´": "%C2%B4",
  "µ": "%C2%B5",
  "¶": "%C2%B6",
  "·": "%C2%B7",
  "¸": "%C2%B8",
  "¹": "%C2%B9",
  "º": "%C2%BA",
  "»": "%C2%BB",
  "¼": "%C2%BC",
  "½": "%C2%BD",
  "¾": "%C2%BE",
  "¿": "%C2%BF",
  "À": "%C3%80",
  "Á": "%C3%81",
  "Â": "%C3%82",
  "Ã": "%C3%83",
  "Ä": "%C3%84",
  "Å": "%C3%85",
  "Æ": "%C3%86",
  "Ç": "%C3%87",
  "È": "%C3%88",
  "É": "%C3%89",
  "Ê": "%C3%8A",
  "Ë": "%C3%8B",
  "Ì": "%C3%8C",
  "Í": "%C3%8D",
  "Î": "%C3%8E",
  "Ï": "%C3%8F",
  "Ð": "%C3%90",
  "Ñ": "%C3%91",
  "Ò": "%C3%92",
  "Ó": "%C3%93",
  "Ô": "%C3%94",
  "Õ": "%C3%95",
  "Ö": "%C3%96",
  "×": "%C3%97",
  "Ø": "%C3%98",
  "Ù": "%C3%99",
  "Ú": "%C3%9A",
  "Û": "%C3%9B",
  "Ü": "%C3%9C",
  "Ý": "%C3%9D",
  "Þ": "%C3%9E",
  "ß": "%C3%9F",
  "à": "%C3%A0",
  "á": "%C3%A1",
  "â": "%C3%A2",
  "ã": "%C3%A3",
  "ä": "%C3%A4",
  "å": "%C3%A5",
  "æ": "%C3%A6",
  "ç": "%C3%A7",
  "è": "%C3%A8",
  "é": "%C3%A9",
  "ê": "%C3%AA",
  "ë": "%C3%AB",
  "ì": "%C3%AC",
  "í": "%C3%AD",
  "î": "%C3%AE",
  "ï": "%C3%AF",
  "ð": "%C3%B0",
  "ñ": "%C3%B1",
  "ò": "%C3%B2",
  "ó": "%C3%B3",
  "ô": "%C3%B4",
  "õ": "%C3%B5",
  "ö": "%C3%B6",
  "÷": "%C3%B7",
  "ø": "%C3%B8",
  "ù": "%C3%B9",
  "ú": "%C3%BA",
  "û": "%C3%BB",
  "ü": "%C3%BC",
  "ý": "%C3%BD",
  "þ": "%C3%BE",
  "ÿ": "%C3%BF"
);

// Convert symbols in string to percent-encoded versions
@function urlEncode( $string ) {
  $new-string: '';

  // Loop through each character in string
  @for $i from 1 through str-length($string) {
    $char: str-slice($string, $i, $i);
    
    // Check if character is in symbol map
    $charLookup: map-get($symbol-map, $char);
    
    // If it is, append encoded character to new string
    @if $charLookup != null {
      $new-string: $new-string + $charLookup;
    }
    
    // Otherwise, append character to new string
    @else {
      $new-string: $new-string + $char;
    }
  }
  
  // Return converted string
  @return $new-string;
}

//------------------------------------------------------------------------
// Return URL-encoded data URIs for SVG icons
//
// Author: @tedmw
//
// Notes: 
// - SVG code must be escaped for older browsers
// - Can't use a hex color since Firefox doesn't like the “#” symbol
// - IE9+ requires height/width attributes or else background-size won't work
//
// Referneces:
// https://css-tricks.com/probably-dont-base64-svg/
// http://stackoverflow.com/questions/21840551/background-size-with-svg-squished-in-ie9-10
//------------------------------------------------------------------------
@function encodeSVG( $color, $width, $height, $contents ) {
  // Convert color to rgba() format to remove “#” from hex code
  $rgba-color: 'rgba(' + red($color) + ',' + green($color) + ',' + blue($color) + ',' + alpha($color) + ')';

  // Strip units from height and width
  $width: strip($width);
  $height: strip($height);

  @return 'data:image/svg+xml,' + urlEncode('<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ' + $width + ' ' + $height + '" width="' + $width + '" height="' + $height + '" preserveAspectRatio="xMidYMid meet" fill="' + unquote($rgba-color) + '">' + unquote($contents) + '</svg>');
}


// Picture icon example
// Optimized using https://jakearchibald.github.io/svgomg/
//---------------------------------
@function pictureIcon( $color ) {
  $width: 30;
  $height: 28;
  $contents: '<path d="M10 9q0 1.25-.88 2.13T7 12t-2.13-.88T4 9t.88-2.13T7 6t2.13.88T10 9zm16 6v7H4v-3l5-5 2.5 2.5 8-8zm1.5-11h-25q-.2 0-.35.15T2 4.5v19q0 .2.15.35t.35.15h25q.2 0 .35-.15t.15-.35v-19q0-.2-.15-.35T27.5 4zm2.5.5v19q0 1.03-.73 1.77T27.5 26h-25q-1.03 0-1.77-.73T0 23.5v-19q0-1.03.73-1.77T2.5 2h25q1.03 0 1.77.73T30 4.5z"/>';

  @return encodeSVG( $color, $width, $height, $contents );
}


// Demo
//---------------------------------
.demo {
  background-image: url( pictureIcon(green) );
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 50% auto;
  border: 1px solid #ccc;
  height: 300px;
  width: 300px;
}

SassMeister-output.css

.demo {
  background-image: url("data:image/svg+xml,%3Csvg%20version=%221.1%22%20baseProfile=%22full%22%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2030%2028%22%20width=%2230%22%20height=%2228%22%20preserveAspectRatio=%22xMidYMid%20meet%22%20fill=%22rgba(0,128,0,1)%22%3E%3Cpath%20d=%22M10%209q0%201.25-.88%202.13T7%2012t-2.13-.88T4%209t.88-2.13T7%206t2.13.88T10%209zm16%206v7H4v-3l5-5%202.5%202.5%208-8zm1.5-11h-25q-.2%200-.35.15T2%204.5v19q0%20.2.15.35t.35.15h25q.2%200%20.35-.15t.15-.35v-19q0-.2-.15-.35T27.5%204zm2.5.5v19q0%201.03-.73%201.77T27.5%2026h-25q-1.03%200-1.77-.73T0%2023.5v-19q0-1.03.73-1.77T2.5%202h25q1.03%200%201.77.73T30%204.5z%22/%3E%3C/svg%3E");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 50% auto;
  border: 1px solid #ccc;
  height: 300px;
  width: 300px;
}

SassMeister-rendered.html

<div class="demo"></div>