title: svg fill is not working in Firefox
body: <p>I am trying to give fill to my svg and everything is working fine in chrome and IE but not in Firefox. In Firefox I can see the style while inspecting but it does not get the color. If I try to keep only path without social-link class in css then it works but I want it with parent class like .social-link path.
  Thank you in advance.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> $(document).ready(function() {
    jQuery('.svg').each(function(){
          var $img = jQuery(this);
          var imgID = $img.attr('id');
          var imgClass = $img.attr('class');
          var imgURL = $img.attr('src');
  
          jQuery.get(imgURL, function(data) {
              // Get the SVG tag, ignore the rest
              var $svg = jQuery(data).find('svg');
  
              // Add replaced image's ID to the new SVG
              if(typeof imgID !== 'undefined') {
                  $svg = $svg.attr('id', imgID);
              }
              // Add replaced image's classes to the new SVG
              if(typeof imgClass !== 'undefined') {
                  $svg = $svg.attr('class', imgClass+' replaced-svg');
              }
  
              // Remove any invalid XML tags as per http://validator.w3.org
              $svg = $svg.removeAttr('xmlns:a');
  
              // Replace image with new SVG
              $img.replaceWith($svg);
  
          }, 'xml');
  
      });
   })
   </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.social-link path {
      fill: #ee44ff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img id="facebook-logo" class="svg social-link" src="images/facebook.svg"&gt;</code></pre>
  </div>
  </div>
  </p>