title: How to dynamically set color of an SVG created by background-image?
body: <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>