title: How to use a hex value for SVG in FireFox
body: <p>I'm loading an SVG URL into a web page using a CSS class. This works in every browser I've tested except Firefox 35.0.1 (and probably earlier versions of Firefox). I've noticed that when using an actual color name, e.g., white, for the stroke, it works as expected, but when I use a hex value, e.g, #ffffff, it does not show a stroke at all. According to MDN, <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes?redirectlocale=en-US&amp;redirectslug=SVG%2FTutorial%2FFills_and_Strokes" rel="noreferrer">hex values are supported</a>.</p>
  
  <p>So, this works fine:</p>
  
  <pre class="lang-css prettyprint-override"><code>.ui-stroke-icon .ui-icon-head:after,
      background-image: url('data:image/svg+xml;utf8,&lt;?xml version="1.0" encoding="utf-8"?&gt;&lt;svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 540 540" enable-background="new 0 0 540 540" xml:space="preserve"&gt;&lt;path fill="none" stroke="white" stroke-width="8" stroke-miterlimit="10" d="...svg coordinates here..."/&gt;&lt;/svg&gt;
  </code></pre>
  
  <p>But this does not:</p>
  
  <pre class="lang-css prettyprint-override"><code>.ui-stroke-icon .ui-icon-head:after,
      background-image: url('data:image/svg+xml;utf8,&lt;?xml version="1.0" encoding="utf-8"?&gt;&lt;svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 540 540" enable-background="new 0 0 540 540" xml:space="preserve"&gt;&lt;path fill="none" stroke="#ffffff" stroke-width="8" stroke-miterlimit="10" d="...svg coordinates here..."/&gt;&lt;/svg&gt;
  </code></pre>
  
  <p>Is there any way I can use a hex value for the color here? This would really help keep my Sass as dry as possible.</p>