How to dynamically set color of an SVG created by background-image?
<p>I am rendering an SVG via background image:</p>

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

<p>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).</p>

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

<p><a href="https://jsfiddle.net/9o28zee3/" rel="nofollow">https://jsfiddle.net/9o28zee3/</a></p>