SVG fill with css variables

Question

I am trying to use CSS variables in my SVG (which is set as a background image) for the fill color, but am having difficulty in getting it to work. It shows the default black, but when I inspect it I can see that the css variable is there and showing my desired color.

HTML

<div class="test">   Testing the css variable color </div>  <div class="icon">  </div> 

CSS

:root {   --primary-color: hsl(332, 61%, 78%); }  div {   width: 100px;   height: 100px;  }  .test {   background: var(--primary-color); }  .icon {   background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 129 129'%3E%3Cpath d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='var(--primary-color)' /%3E%3C/svg%3E"); } 

Here is a codepen to check out!

I've seen CSS Variables being used in SVG here but I'm not sure if it's possible to do with background images? I'm new to both using SVG and CSS variables so I'm not sure if I'm doing something wrong... Would love some insight as to why it's not rendering the color properly!

Answer 1

Okay here we go... I will first explain why it does not work and then I will show an alternative.

Why your approach doesn't work

In your example the svg is not part of the DOM. So you cannot use css to modify the attributes of the svg.

What you are doing is adding an inline-style to the svg in your url. Since the browser does not recognise --primary-color as a color it doesn't work.

An alternative approach

An alternative approach is to put the svg in the html and fake a background. I did this by absolute positioning the svg and moving it to the background with z-index.

Do note you will have to modify the svg or the positioning to place the background in the way you want. Normally you would use background-size for this. But with some effort you can replicate this behaviour within the svg or position it better by using css.

:root {    --primary-color: hsl(332, 61%, 78%);  }    div {    width: 100px;    height: 100px;   }    .test {    background: var(--primary-color);  }  .icon{ /*postion relative for absolute positioning to work*/    position: relative;   }  .icon>svg{    position: absolute;    top: 0px;    right: 0px;    left: 0px;    bottom: 0px;    z-index: -1;  }  .icon>svg>path{ /*target the image with css*/    fill: var(--primary-color);  }

<div class="test">    Testing the css variable color  </div>    <div class="icon">    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 129 129' id='background'><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z'/> </svg>    <p>Text goes here...</p>  </div>