# Scenario 1: SVG in DOM

This is the image we would like to see in every scenario, regardless of the implementation method.

Now, let's say, inserting it into the DOM is not an option, it needs to a be background-image . We also need a way to set the color with SCSS.

    $svgHex: #990000;
    .dom {
      fill: $svgHex;
    }

# Scenario 2: SVG as background-image with data-uri

No background to be seen 😒.

The reason why this breaks is that the data-uri contains a hash `#` in front of the color which obviously has a different meaning in the context of an URL.

    $svgHex: #990000;
    .hex {
      background: #{url('data:image/svg+xml;utf8,
      <svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
      <circle cx="7" cy="7" r="6" fill="' + $svgHex + '" />
      ;</svg>')};
    }

# Scenario 3: rgb to the rescue

So, this one works much better.

RGB color values in SASS are of the data type color and can therefore be further processed.

To prevent processing, it needs to be converted into a string .

    $svgHex: #990000;
    .rgb {
      $hex:    $svgHex;
      $red:    red($hex);
      $green:  green($hex);
      $blue:   blue($hex);
      $svgRgb: #{'rgb(' + $red + ',' + $green + ',' + $blue + ')'};

      background: #{url('data:image/svg+xml;utf8,
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
      <circle cx="7" cy="7" r="6" fill="' + $svgRgb + '" />
      </svg>')};
    }

Also note @cerebe's comments below!