Using root: to manage fill attribute for svg as data-uri from css variables

Question

I can’t figure out how this is supposed to be done.

I looked on here to try to find an answer that will work and I still can't figure out how to implement it in my code.

I need help doing this.

Nothing I am trying is working.

:root {
--color-a: teal;
--color-b: black;
--color-c: orange;
--color-d: black;
}

--variableSVGFill: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='165' height='165' viewBox='0 0 165 165'><rect x='0' y='0' width='165' height='165' fill='var(--color-a)' /><rect x='5' y='5' width='160' height='160' fill='var(--color-b)' /><rect x='10' y='10' width='150' height='150' fill='var(--color-c)' /><rect x='15' y='15' width='140' height='140' fill='var(--color-d)' /><rect x='20' y='20' width='130' height='130' fill='var(--color-a)' /><rect x='25' y='25' width='120' height='120' fill='var(--color-b)' /><rect x='30' y='30' width='110' height='110' fill='var(--color-c)' /><rect x='35' y='35' width='100' height='100' fill='var(--color-d)' /><rect x='40' y='40' width='90' height='90' fill='var(--color-a)' /><rect x='45' y='45' width='80' height='80' fill='var(--color-b)' /><rect x='50' y='50' width='70' height='70' fill='var(--color-c)' /><rect x='55' y='55' width='60' height='60' fill='var(--color-d)' /><rect x='60' y='60' width='50' height='50' fill='var(--color-a)' /><rect x='65' y='65' width='40' height='40' fill='var(--color-b)' /><rect x='70' y='70' width='30' height='30' fill='var(--color-c)' /><rect x='75' y='75' width='20' height='20' fill='var(--color-d)' /><rect x='80' y='80' width='10' height='10' fill='var(--color-a)' /></svg>");

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  
  var(--variableSVGFill);
}

The Snippet features the svg data uri without the variables inside.

https://jsfiddle.net/0qwa6rbz/

I'm trying to add variables to the colors.

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}
body {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='165' height='165' viewBox='0 0 165 165'><rect x='0' y='0' width='165' height='165' fill='teal' /><rect x='5' y='5' width='160' height='160' fill='black' /><rect x='10' y='10' width='150' height='150' fill='orange' /><rect x='15' y='15' width='140' height='140' fill='black' /><rect x='20' y='20' width='130' height='130' fill='teal' /><rect x='25' y='25' width='120' height='120' fill='black' /><rect x='30' y='30' width='110' height='110' fill='orange' /><rect x='35' y='35' width='100' height='100' fill='black' /><rect x='40' y='40' width='90' height='90' fill='teal' /><rect x='45' y='45' width='80' height='80' fill='black' /><rect x='50' y='50' width='70' height='70' fill='orange' /><rect x='55' y='55' width='60' height='60' fill='black' /><rect x='60' y='60' width='50' height='50' fill='teal' /><rect x='65' y='65' width='40' height='40' fill='black' /><rect x='70' y='70' width='30' height='30' fill='orange' /><rect x='75' y='75' width='20' height='20' fill='black' /><rect x='80' y='80' width='10' height='10' fill='teal' /></svg>");
}

Look at this answer: https://stackoverflow.com/questions/13367868/how-to-modify-the-fill-color-of-an-svg-image-when-being-served-as-background-ima — Omar Siddiqui, Aug 12 '21 at 14:49
You still have some other questions just answered but not up voted nor selected as the accepted answer. Please, would you be so nice and attend that? — SIMBIOSIS surl, Aug 13 '21 at 00:57

score 1 · Answer 1 · answered Aug 12 '21 at 15:53

1

I was able to get this to work with SASS/SCSS. I don't think it will be possible with vanilla CSS

Here's the pen: https://codepen.io/OSquiddy/pen/KKmEVNM

This is the CSS used:

$color-a: teal;
$color-b: black;
$color-c: orange;
@mixin element-color($color1, $color2, $color3) {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='165' height='165' viewBox='0 0 165 165' ><rect x='0' y='0' width='165' height='165' fill='#{$color2}' /><rect x='5' y='5' width='160' height='160' fill='#{$color1}' /><rect x='10' y='10' width='150' height='150' fill='#{$color2}' /><rect x='15' y='15' width='140' height='140' fill='#{$color3}' /><rect x='20' y='20' width='130' height='130' fill='#{$color2}' /><rect x='25' y='25' width='120' height='120' fill='#{$color1}' /><rect x='30' y='30' width='110' height='110' fill='#{$color2}' /><rect x='35' y='35' width='100' height='100' fill='#{$color3}' /><rect x='40' y='40' width='90' height='90' fill='#{$color2}' /><rect x='45' y='45' width='80' height='80' fill='#{$color1}' /><rect x='50' y='50' width='70' height='70' fill='#{$color2}' /><rect x='55' y='55' width='60' height='60' fill='#{$color3}' /><rect x='60' y='60' width='50' height='50' fill='#{$color2}' /><rect x='65' y='65' width='40' height='40' fill='#{$color1}' /><rect x='70' y='70' width='30' height='30' fill='#{$color2}' /><rect x='75' y='75' width='20' height='20' fill='#{$color3}' /><rect x='80' y='80' width='10' height='10' fill='#{$color1}' /></svg>");
}

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}
body {
  @include element-color($color-a, $color-b, $color-c);
}

You can switch the values of the sass variable, and the colors of the SVG will change accordingly

answered Aug 12 '21 at 15:53

Omar Siddiqui

1,625
5
18

Can it use root: instead? – Aug 12 '21 at 15:55
I've been searching for a way to let it do that, but I don't think it will be possible. There were quite a few articles from 2016-17 talking about how we were soon going to get native CSS implementation for mixins, but I don't think that went anywhere. Checking caniuse.com for support for the suggested keyword (@apply) showed that that keyword was [dropped](https://www.caniuse.com/css-apply-rule) from all browsers – Omar Siddiqui Aug 12 '21 at 16:32
How come your code doesn't look like this? https://jsfiddle.net/0qwa6rbz/ – Aug 12 '21 at 16:47
What do you mean? If you're asking about the `$` symbol and other stuff in my css, it's because I'm using a preprocessor called Sass which adds extra functionality to my css. – Omar Siddiqui Aug 12 '21 at 16:51
In your code there is black dividing the squares. https://codepen.io/OSquiddy/pen/KKmEVNM //// In the other code there is no black dividing the squares. https://jsfiddle.net/0qwa6rbz/ What would be edited in your code? – Aug 12 '21 at 16:52
Oh that's because I changed the variable order by mistake, then couldn't remember what it was originally, so I approximated it. You can fix it by switching around the variables in the SVG – Omar Siddiqui Aug 12 '21 at 16:54
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/235947/discussion-between-omar-siddiqui-and-csshtmljavascript14578). – Omar Siddiqui Aug 12 '21 at 16:56
1

@csshtmljavascript14578 I've fixed the colors on the pen. You can look at it now – Omar Siddiqui Aug 12 '21 at 17:05
And I was able to add 4 https://jsfiddle.net/3smkg5p7/ – Aug 12 '21 at 17:07
Maybe someone on here will be able to figure out root: – Aug 12 '21 at 17:10
Can you see if you see if you can help me with this. https://stackoverflow.com/questions/68791787/how-to-use-mixin-and-include-to-set-a-color-for-each-button How to use '@mixin' and '@include' to set a color for each button – Aug 15 '21 at 14:52
How to arrange for different values of $color is what I am trying to do. – Aug 15 '21 at 15:05

Using root: to manage fill attribute for svg as data-uri from css variables

1 Answers1

Linked