How to dynamically set color of an SVG created by background-image?

Question

I am rendering an SVG via background image:

.svg_background
{
    color:white;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 23"><ellipse fill="none" stroke="currentColor" stroke-width="2" cx="13" cy="8" rx="7" ry="7"/></svg>');
}

The purpose of this is to provide an image for a form element (no clean way to embed AFAIK), and to have the color of the image match text color (or a color set by LESS).

In the following fiddle, I see that the CSS correctly applies to an embedded SVG example, but not the SVG generated via background-image. Is there a way background-images are rendered that is causing this method to fail?

https://jsfiddle.net/9o28zee3/

Answer 1

The svg element in the url of background-image needs to have the color, like this:

background-image:url('data:image/svg+xml,<svg style="color:white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 23"><ellipse fill="none" stroke="currentColor" stroke-width="2" cx="13" cy="8" rx="7" ry="7"/></svg>');

As far as making that dynamic, this post may be helpful for you: Modify SVG fill color when being served as Background-Image