title: currentColor inheritance for SVG url
body: <p>Same question as <a href="https://stackoverflow.com/questions/13000682/how-do-i-have-an-svg-image-inherit-colors-from-the-html-document">How do I have an SVG image inherit colors from the HTML document?</a>, but specifically when applied to an svg image used as content on a <code>:before</code> pseudo-element.</p>
  
  <p>(Desired behavior is that both checkmarks inherit the red color from the body. Currently only the inline SVG does.)</p>
  
  <pre><code>&lt;style type='text/css'&gt;
      body {
          color: red;
      }
  
      .checkmark {
          height: 2em;
          width: 2em;
      }
  
      .checkmark:before {
          content: url("data:image/svg+xml;utf8,&lt;svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='-0.5 0 20 15'&gt;&lt;rect fill='currentColor' stroke='none' transform='rotate(45 4.0033 8.87436)' height='5' width='6.32304' y='6.37436' x='0.84178'&gt;&lt;/rect&gt;&lt;rect fill='currentColor' stroke='none' transform='rotate(45 11.1776 7.7066)' width='5' height='16.79756' y='-0.69218' x='8.67764'&gt;&lt;/rect&gt;&lt;/svg&gt;");
      }
  &lt;/style&gt;
  
  &lt;!-- Renders red --&gt;
  &lt;svg xmlns='http://www.w3.org/2000/svg' width='2em' height='2em' viewBox='-0.5 0 20 15'&gt;&lt;rect fill='currentColor' stroke='none' transform='rotate(45 4.0033 8.87436)' height='5' width='6.32304' y='6.37436' x='0.84178'&gt;&lt;/rect&gt;&lt;rect fill='currentColor' stroke='none' transform='rotate(45 11.1776 7.7066)' width='5' height='16.79756' y='-0.69218' x='8.67764'&gt;&lt;/rect&gt;&lt;/svg&gt;
  
  &lt;!-- Renders #000 --&gt;
  &lt;div class="checkmark"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/adamschwartz/XLS8v/" rel="noreferrer">jsFiddle Demo</a></p>