Using CSS Variables in SVG as background image

Question

I have an SVG Image which is to be loaded on my webpage as the background. Hence the css for it is:

body{
    background: url('path/to/the/svg/image.svg')
    .
    .
}

I have a css variable named accent-primary-color, which defines the accent color of the page (and is set by the user) and I want the color to be reflected in the SVG as the main color. The svg file has a style tag as follows:

<style>
    .outline-paths{
        fill: var(--accent-primary-color);
    }
</style>

I would have achieved the color in SVG, if it were a code in the HTML file, but in case of background-image, that won't work because its and external SVG, being used as background and it doesn't have access to the CSS Variables.

I also found methods to achieve the thing using Data URI methods like:

background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>');

but I can't use that because the SVG Code is very long (602 Lines without minifying), and it also has several single and double quotes in the file.

Is there any other method through which the SVG File can access the CSS Variables while being used as a background image.

Does this answer your question? [How to modify the fill color of an SVG image when being served as background image?](https://stackoverflow.com/questions/13367868/how-to-modify-the-fill-color-of-an-svg-image-when-being-served-as-background-ima) — the.marolie, Mar 01 '23 at 20:16
@the.marolie I already saw the solution, and unfortunately, as I described in the question, I cannot use the method suggested in the solution. — Satyam Mishra, Mar 01 '23 at 20:21

Danny '365CSI' Engelman · Accepted Answer · 2023-03-02T10:24:35.043

You can use a modern Web Component

Load the SVG from an external location
encode characters " and %
read CSS Property --rectcolor
inject it as <style> into the SVG
inject as backgroundImage

<style>
 :root{
  --rectcolor:rebeccapurple;
  }
</style>
<svg-import-background src="//svg-cdn.github.io/red.svg"></svg-import-background>
<svg-import-background src="//svg-cdn.github.io/blue.svg"></svg-import-background>

<script>
  customElements.define("svg-import-background", class extends HTMLElement {
    async connectedCallback() {
      let svg = await (await fetch(this.getAttribute("src"))).text();
      svg = svg.replace(/\>[\t\s\n ]+\</g, "><"); // replace all BETWEEN tags
      svg = svg.replace(/#/g, "%23");
      svg = svg.replace(/"/g, "'");
      let color = getComputedStyle(this).getPropertyValue("--rectcolor");
      let style = `<style>rect{fill:${color}}</style>`;
      svg = svg.replace("</svg>",style + `</svg>`);
      this.style.display="inline-block";
      this.style.width="100px";
      this.style.height="100px";
      this.style.backgroundImage = `url("data:image/svg+xml;charset=UTF-8,${svg}")`;
      console.log(svg);
    }
  })
</script>

Amazing work out there! I tried the idea you suggested, but I can't display the svg on the background. But, I know the method is correct, because the console displays the svg very well. To get the desired output, I would need a bit more clarification on, where is `this` referencing to. Can you please let me know. Also, it would be helpful if you provide me a reference to documentation on the method. Thanks! — Satyam Mishra, Mar 02 '23 at 12:25
``this`` is the DOM element ```` you can use any DOM element — Danny '365CSI' Engelman, Mar 02 '23 at 12:42

Using CSS Variables in SVG as background image

1 Answers1