If you use .svg for your assets on localhost (I did it for retina support and keep the size of the asset small) but the .svg doesn’t appear on webkit based browser (chrome and safari) while it appears on Firefox, here’s the possible cause and fix:

Possible Cause

Check your console. You might find this message: Resource interpreted as Image but transferred with MIME type text/xml

Translation: the browser confuses about how to interpret the .svg: it should be an image but its MIME type said that it is text.

Possible fix

I found this Fixing SVG Mime-Type/CSS Errors article helpful:

  1. Add this rule to your .htaccess on WordPress’ root install
  2. Clear your browser cache and cookie

That’s it. You might see the .svg now.

Share Your Thought