CSS background url SVG fill color not working (not base64) when compiling from SASS

Question

I'm using SASS to generate my css and i'm trying to create a dotted repeated pattern to simulate a border-bottom on abbr tags using a background image image SVG.

I've searched deep but can't find a solution as i'm using sass to modify the fill color for specific site accents using parent class.

The fill is on the <rect ... /> element in the SVG.

This is my sass below...

ABBR {
  text-decoration: none !important;
  cursor: default !important;
  border: none;
  position: relative;

  &:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background: {
      image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="2" height="1"><rect width="1" height="1" fill="#{$body-color}" /></svg>');
      repeat: repeat;
    }

    @include accent-colors {
      background: {
        image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="2" height="1"><rect width="1" height="1" fill="#{$accent-color}" /></svg>') !important;
      }
    }
  }
}

This is my compiled CSS and as you can see my fill colors are outputting fine.

ABBR {
  text-decoration: none !important;
  cursor: default !important;
  border: none;
  position: relative; }

  ABBR:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="2" height="1"><rect width="1" height="1" fill="#393e44" /></svg>');
    background-repeat: repeat; }

    .accent-green ABBR:after {
      background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="2" height="1"><rect width="1" height="1" fill="#96d63d" /></svg>') !important; }

    .accent-blue ABBR:after {
      background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="2" height="1"><rect width="1" height="1" fill="#5e80f6" /></svg>') !important; }

    .accent-teal ABBR:after {
      background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="2" height="1"><rect width="1" height="1" fill="#2fb8cd" /></svg>') !important; }

    .accent-pink ABBR:after {
      background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="2" height="1"><rect width="1" height="1" fill="#ff6e9e" /></svg>') !important; }

    .accent-purple ABBR:after {
      background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="2" height="1"><rect width="1" height="1" fill="#ca63e5" /></svg>') !important; }

    .accent-orange ABBR:after {
      background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="2" height="1"><rect width="1" height="1" fill="#fd923a" /></svg>') !important; }

    .accent-red ABBR:after {
      background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="2" height="1"><rect width="1" height="1" fill="#e73e50" /></svg>') !important; }

And when i'm viewing the element css using the inspector, there appears to be no errors and its using the correct accent class SVG background. But no fill color is showing.

I've upload the SVG code as an .svg file. When you zoom in you can see the fill on the SVG rect element is pink and working. The code is copied directly from Chrome's web inspector. So it's really bizarre why this does not work in the css background image attribute. Check it out below.

SVG https://a.uguu.se/ZvcDJWMpf5fl_accent-pink.svg

See this link below for an exact repo of my problem in jsfiddle using sass.

Fiddle https://jsfiddle.net/joshmoto/j8on1b9v/

If you inspect the :after element in the dom and remove the # from the rect fill color value you will see the SVG works but it's displaying black. Or check out this version where i've removed the # using a string replace function.

Fiddle https://jsfiddle.net/joshmoto/L1g5fo34/2/

The SVG works, but again black, so not working entirely.

try to encode the image like this: `background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='1'%3E%3Crect width='1' height='1' fill='%23393e44' /%3E%3C/svg%3E");` This: `%23` instead of `#` and other replacements. — enxaneta, Mar 09 '19 at 07:15
Just encoding the `#` seemed to do the trick. Thanks for your comment. — joshmoto, Mar 09 '19 at 16:20

score 9 · Accepted Answer · answered Mar 09 '19 at 06:31

In svg, # needs to be encoded, and replaced with %23.

So you need to create a function to do the replacement. I.E.:

@function url-encoded-color($color) {
    @return '%23' + str-slice('#{$color}', 2, -1)
}

And then for svg, place it instead of variable directly:

   background: {
      image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="2" height="1"><rect width="1" height="1" fill="#{url-encoded-color($body-color)}" /></svg>');
      repeat: repeat;
    }

Full example: https://jsfiddle.net/niklaz/26Ljsmdu/3/

Bingo, thank you worked a beaut. – joshmoto Mar 09 '19 at 16:18 — joshmoto, Mar 09 '19 at 16:18

CSS background url SVG fill color not working (not base64) when compiling from SASS

1 Answers1