Modify SVG fill color when being served as Background-Image

Question

Placing the SVG output directly inline with the page code I am able to simply modify fill colors with CSS like so:

po         


        

Answer 1

I needed something similar and wanted to stick with CSS. Here are LESS and SCSS mixins as well as plain CSS that can help you with this. Unfortunately, it's browser support is a bit lax. See below for details on browser support.

LESS mixin:

.element-color(@color) {
  background-image: url('data:image/svg+xml;utf8,');
}

LESS usage:

.element-color(#fff);

---

SCSS mixin:

@mixin element-color($color) {
  background-image: url('data:image/svg+xml;utf8,');
}

SCSS usage:

@include element-color(#fff);

---

CSS:

// color: red
background-image: url('data:image/svg+xml;utf8,');

---

Here is more info on embedding the full SVG code into your CSS file. It also mentioned browser compatibility which is a bit too small for this to be a viable option.