SVG fill with css variables - css

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

Now you can include SVG as mask-image instead of background. Don't forget set background color from css variables for .icon block.
.icon {
background: var(--primary-color);
-webkit-mask-image: 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' /%3E%3C/svg%3E");
mask-image: 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' /%3E%3C/svg%3E");
}
You can check it in this CodePan
Here is information from Caniuse about mask-image
And here documentation about mask property

Answer 2

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>

Answer 3

Don't include svg as background, by doing that you don't have control over it's fill, instead try adding it inline in html and via css you can control the fill via css variable, please check the working example below, hope it helps :)
:root {
--primary-color: hsl(332, 61%, 78%);
}
div {
width: 100px;
height: 100px;
}
.test {
background: var(--primary-color);
}
.icon {
color: var(--primary-color);
fill: currentColor;
width: 64px;
height: 64px;
}
<div class="test">
Testing the css variable color
</div>
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129">
<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>

Answer 4

Using the <symbol> tag and CSS variables
CSS variables inherit the fill property. Therefore, it is possible to assign (declare) a variable inside the <symbol> tag, the value of which can be subsequently changed many times for each instance of the svg element.
<symbol id="monstr">
<rect width="100%" height="100%" fill="transparent" />
<path id="face" fill="var(--color-face)" d="M15.4,34.1L24,37l8.6-2.9c1.9-0.6,3-2.6,2.6-4.6L33,20H15l-2.2,9.5C12.3,31.5,13.5,33.5,15.4,34.1z"/>
<path id="nose" fill="var(--color-nose)" d="M29,30l-3-3h-4l-3,3v7c0,1.1,0.9,2,2,2h6c1.1,0,2-0.9,2-2V30z"/>
Each path, circle, ellips, etc. can be assigned its own variable fill = "var (- color-face)" for fill and then change its value in the external style sheet:
.monstr-colors { --color-face: #7986CB; --color-nose: #9FA8DA; }
This technique creates powerful and flexible styling options for multicolor svg.
For example, for one state of an icon, we can assign one color scheme, and with : hover, assign a different color set to the same icon.
.monstr-colors {
--color-face: #7986CB;
--color-nose: #9FA8DA;
}
.monstr-colors:hover {
--color-face: #3F8B4D;
--color-nose: #58C46C;
)
Below is an example, according to your taste, the color scheme of the image is easily created and changed:
.monstr-colors {
--color-face: #7986CB;
--color-nose: #9FA8DA;
--color-hair-right:#3949AB;
--color-hair-right2:#3949AB;
--color-hair-left:#3949AB;
--color-hair-left2:#3949AB;
--color-eye-right:#1A237E;
--color-pupil-right:#77006B;
--color-eye-left:#1A237E;
--color-pupil-left:#77006B;
--color-ellipse1:#9FA8DA;
--color-ellipse2:#7986CB;
--color-ellipse3:#C5CAE9;
}
.monstr-colors:hover {
--color-face: #3F8B4D;
--color-nose: #58C46C;
--color-hair-right:gold;
--color-hair-right2:#FFBB00;
--color-hair-left:gold;
--color-hair-left2:#FFBB00;
--color-eye-right:#77006B;
--color-pupil-right:#FF4151;
--color-eye-left:#77006B;
--color-pupil-left:#FF4151;
--color-ellipse1:#FFDD00;
--color-ellipse2:#C1A700;
--color-ellipse3:#FFEE7D;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="192" height="192" viewBox="0 0 48 48" >
<symbol id="monstr">
<rect width="100%" height="100%" fill="transparent" />
<path id="face" fill="var(--color-face)" d="M15.4,34.1L24,37l8.6-2.9c1.9-0.6,3-2.6,2.6-4.6L33,20H15l-2.2,9.5C12.3,31.5,13.5,33.5,15.4,34.1z"/>
<path id="nose" fill="var(--color-nose)" d="M29,30l-3-3h-4l-3,3v7c0,1.1,0.9,2,2,2h6c1.1,0,2-0.9,2-2V30z"/>
<path id="hair-right" fill="var(--color-hair-right)" d="M31,7c-0.5,0-1,0.4-1,1c0,0,0,0,0,0c-0.4,0-0.8,0.2-0.9,0.6c-0.2,0.5,0,1.1,0.6,1.3 C30,10.1,40,14.4,40,32.4V37c0,0.6,0.4,1,1,1s1-0.4,1-1v-4.6c0-14.4-6.1-20.7-9.5-23.1C35.9,10.3,44,14.7,44,34c0,0.6,0.4,1,1,1 s1-0.4,1-1C46,7.7,31.6,7,31,7z"/>
<path id="hair-right2" fill="var(--color-hair-right2)" d="M29.5,10.1c-0.5-0.3-1.1-0.1-1.3,0.4c-0.3,0.5-0.1,1.1,0.4,1.4c0.1,0,7.5,4.3,7.5,20.1v8c0,0.6,0.4,1,1,1 s1-0.4,1-1v-8C38,14.9,29.8,10.3,29.5,10.1z"/>
<path id="hair-left" fill="var(--color-hair-left)" d="M18.4,9.9c0.5-0.2,0.8-0.8,0.6-1.3C18.8,8.2,18.4,8,18,8c0,0,0,0,0,0c0-0.6-0.5-1-1-1C16.4,7,2,7.7,2,34 c0,0.6,0.4,1,1,1s1-0.4,1-1c0-19.6,8.1-23.8,11.6-24.7C12.2,11.6,6,17.9,6,32.4V37c0,0.6,0.4,1,1,1s1-0.4,1-1v-4.6 C8,14.4,18,10.1,18.4,9.9z"/>
<path id="hair-left" fill="var(--color-hair-left2)" d="M18.5,10.1C18.2,10.3,10,14.9,10,32v8c0,0.6,0.4,1,1,1s1-0.4,1-1v-8c0-15.8,7.4-20.1,7.5-20.1 c0.5-0.3,0.7-0.9,0.4-1.4C19.6,10,19,9.9,18.5,10.1z"/>
<path id="eye-right" fill="var(--color-eye-right)" d="M25,24.9c0,0,0.2,1.3,0.6,1.7s3.3,2.5,5.9-0.9c1.2-1.5,0.6-3.8,0.6-3.8S29.4,24.1,25,24.9z"/>
<circle id="pupil-right" cx="28" cy="25" r="1.5" fill="var(--color-pupil-right)" />
<path id="eye-left" fill="var(--color-eye-left)" d="M15.8,21.8c0,0-0.6,2.3,0.6,3.8c2.6,3.4,5.5,1.4,5.9,0.9c0.4-0.4,0.6-1.7,0.6-1.7 C18.6,24.1,15.8,21.8,15.8,21.8z"/>
<circle id="pupil-left" fill="var(--color-pupil-left)" cx="20" cy="25" r="1.5" fill="red" />
<ellipse id="ellipse1" fill="var(--color-ellipse1)" cx="24" cy="15" rx="12" ry="10"/>
<ellipse id="ellipse2" fill="var(--color-ellipse2)" cx="24" cy="13.8" rx="10" ry="7.8"/>
<ellipse id="ellipse3" fill="var(--color-ellipse3)" cx="24.2" cy="12.2" rx="8" ry="6.2"/>
</symbol>
<svg class="monstr-colors">
<use xlink:href="#monstr" />
</svg>
</svg>
Below is a combined example with styling three instances of the same image.
Each instance of the created <use xlink: href = "# monstr"/> has its own color scheme, which is linked to the nested svg class.
<div class="container">
<svg class="color-monstr">
<use xlink:href="#monstr" transform="scale(3)" />
</svg>
</div>
<div class="container2">
<svg class="color-monstr2">
<use xlink:href="#monstr" transform="scale(2)" />
</svg>
</div>
<div class="container3">
<svg class="color-monstr3">
<use xlink:href="#monstr" transform="scale(3)" />
</svg>
</div>
With :hover, each instance replaces the color scheme with the color scheme of the adjacent instance.
.parent {
position:relative;
}
.container {
width:400px;
height:400px;
position:absolute;
top:0;
}
.container2 {
position: absolute;
top:0;
left:150px;
}
.container3 {
position: absolute;
top:0;
left:240px;
}
.color-monstr {
--color-ears: #459E48;
--color-horn-right: #388E3C;
--color-horn-left: #388E3C;
--color-face:#4CAF50;
--circle-horn-left:#8BC34A;
--circle-horn-right:#8BC34A;
--eye-right:#FFF9C4;
--eye-left:#FFF9C4;
--pupil-right:#263238;
--pupil-left:#263238;
--mouth:#173027;
}
.color-monstr:hover {
--color-ears: #504F7A;
--color-horn-right: #504FF6;
--color-horn-left: #504FF6;
--color-face:#807FC4;
--circle-horn-left:#FF00AE;
--circle-horn-right:#FF00AE;
--eye-right:#FFDBF4;
--eye-left:#FFDBF4;
--pupil-right:#263238;
--pupil-left:#263238;
--mouth:#FFDBF4;
}
.color-monstr2 {
--color-ears: #504F7A;
--color-horn-right: #504FF6;
--color-horn-left: #504FF6;
--color-face:#807FC4;
--circle-horn-left:#FF00AE;
--circle-horn-right:#FF00AE;
--eye-right:#FFDBF4;
--eye-left:#FFDBF4;
--pupil-right:#263238;
--pupil-left:#263238;
--mouth:#FFDBF4;
}
.color-monstr2:hover {
--color-ears: #770051;
--color-horn-right: #388E3C;
--color-horn-left: #388E3C;
--color-face:#FFDD00;
--circle-horn-left:#D0FF00;
--circle-horn-right:#A0C400;
--eye-right:#FFF9C4;
--eye-left:#FFF9C4;
--pupil-right:#263238;
--pupil-left:#263238;
--mouth:#FFF9C4;
}
.color-monstr3 {
--color-ears: #770051;
--color-horn-right: #388E3C;
--color-horn-left: #388E3C;
--color-face:#FFDD00;
--circle-horn-left:#D0FF00;
--circle-horn-right:#A0C400;
--eye-right:#FFF9C4;
--eye-left:#FFF9C4;
--pupil-right:#263238;
--pupil-left:#263238;
--mouth:#FFF9C4;
}
.color-monstr3:hover {
--color-ears: #459E48;
--color-horn-right: #388E3C;
--color-horn-left: #388E3C;
--color-face:#4CAF50;
--circle-horn-left:#8BC34A;
--circle-horn-right:#8BC34A;
--eye-right:#FFF9C4;
--eye-left:#FFF9C4;
--pupil-right:#263238;
--pupil-left:#263238;
--mouth:#173027;
}
<div class="parent">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" >
<symbol id="monstr">
<path id="ears"
fill="var(--color-ears)"
d="M12,31c-2.3,0-3.7-3.2-4-5c0.7-1.3,3.3-2,4-2c5.7-2.4,17.8-2.9,24,0c0.7,0,3.3,0.7,4,2c-0.3,1.8-1.7,5-4,5 C33.6,32.8,14.7,34.2,12,31z"/>
<g>
<path id="horn-right"
fill="var(--color-horn-right)" d="M40,8c-0.6,0-1,0.4-1,1c0,2.7-3.3,5-6,5c-0.6,0-1,0.4-1,1s0.4,1,1,1c3.7,0,8-3.1,8-7C41,8.4,40.6,8,40,8z"/>
<path id="horn-left"
fill="var(--color-horn-left)" d="M8,8c0.6,0,1,0.4,1,1c0,2.7,3.3,5,6,5c0.6,0,1,0.4,1,1s-0.4,1-1,1c-3.7,0-8-3.1-8-7C7,8.4,7.4,8,8,8z"/>
</g>
<path id="face"
fill="var(--color-face)" d="M12,31v-7c0-9.2,5.3-16,12-16s12,6.8,12,16v7c-1.2,5.6-7,12-12,12S13.2,36.6,12,31z"/>
<g>
<circle id="circle-horn-left" fill="var(--circle-horn-left)" cx="8" cy="9" r="3"/>
<circle id="circle-horn-right" fill="var(--circle-horn-right)" cx="40" cy="9" r="3"/>
</g>
<g>
<ellipse id="eye-right" fill="var(--eye-right)" cx="29" cy="26" rx="2" ry="4"/>
<ellipse id="eye-left" fill="var(--eye-left)" cx="19" cy="26" rx="2" ry="4"/>
</g>
<g>
<circle id="pupil-right" fill="var(--pupil-right)" cx="29" cy="27" r="1"/>
<circle id="pupil-left" fill="var(--pupil-left)" cx="19" cy="27" r="1"/>
</g>
<path id="mouth" fill="var(--mouth)" d="M24,33c-4,0-5.8,3-5.8,3s2.6,0,5.8,0s5.8,0,5.8,0S28,33,24,33z"/>
</symbol>
</svg>
<div class="container">
<svg class="color-monstr">
<use xlink:href="#monstr" transform="scale(3)" />
</svg>
</div>
<div class="container2">
<svg class="color-monstr2">
<use xlink:href="#monstr" transform="scale(2)" />
</svg>
</div>
<div class="container3">
<svg class="color-monstr3">
<use xlink:href="#monstr" transform="scale(3)" />
</svg>
</div>
</div>

Answer 5

Here is a better way or how I color my SVGs. As Inline SVGs have a bitter taste on readability of the rest of the code and adding them as background or mask, they can not be colored by a dark theme switch. Include them externally and load them inside an html object:
<object id="background-anim" class="svg" aria-hidden="true" data="./media/Background-fluid-lines-anim.svg" type="image/svg+xml"></object>
This SVG is now added externally.
To set the colors you need to set for the desired colors a class inside of the SVG.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080">
<defs>
<style>
.svg-element__clrText{
fill:rgb(255,255,255);
}
.svg-element__clrPrimary{
fill:rgb(155,155,155);
}
.svg-element__clrBackground{
fill:rgb(55,55,55);
}
</style>
</defs>
<path class="svg-element__clrText"></path>
</svg>
In your paths, you will set those classes to the desired elements that should adapt colors.
Now you will manipulate those fill values with JavaScript and add the correct CSS Custom Porperties:
/*Optional: Listening to the clicked switch if you have one*/
document.querySelectorAll('.theme-toggle').forEach((toggle) => {
toggle.addEventListener('click', () => themeToggle);
});
window.themeToggle = function themeToggle() {
document.documentElement.classList.toggle('darkMode');
//this .darkmode{} class changes the values of my variables set to white mode in the ':root{}' in the css file
loadTheme()
}
function loadTheme(){
/* For loading more than just the colors */
loadThemeIcon();
loadSVGColors();
}
/* Now here comes the important part */
function loadSVGColors() {
const svgs = document.querySelectorAll('.svg'); //getting NodeList of SVGs
const style = getComputedStyle(document.body), //getting CSS variables inside of js
svgs.forEach(svg => {
element = svg.contentDocument; //get the actual svg that is loaded into the object element
const clrText = svg.querySelectorAll('.svg-element__textClr'), //searching inside of the SVG after my classes
textClr.forEach(element => { //NodeList to Array
element.style.fill = style.getPropertyValue('--clr-text');//whatever variables you have set or you can toggle a class that has only this css variable inside
});
/* [...and so on]*/
const primeClr = element.querySelectorAll('.svg-element__primeClr');
primeClr.forEach(e => {
e.style.fill = style.getPropertyValue('--clr-primary');
});
});
}
I guess there is a better performance when you add the SVGs inside the HTML with fill: var(--clr-text), however after having 50kb of code per SVG leads to lots of scrolling
I know this goes further than the question but I would have been glad to find this before under these SO posts.

Answer 6

I stumbled upon this for a very similar case and want to share a completely different approach.
Use the css multi background feature (MDN Docs)
First you need to make the part of your svg that you want to color transparent with fill="transparent"
Now you can just specify multiple backgrounds, where one can be your variable, for example
body {
background: url('path/to/your/svg/or/data-url'), var(--background);
}

Answer 7

If you need to control only one color, you can use currentColor keyword in the fill property and change it through css color property.
.icon {
color: var(--primary-color);
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='currentColor' /%3E%3C/svg%3E");
}

Answer 8

<path class="class-name"/>
:root {
--color : #123456;
}
.class-name {
fill : var(--color)
}
try this