Fixing SVG Mime-Type/CSS Errors
Websites can sometimes be picky about the file-types that they are served. One issue that I recently discovered was that a stylesheet was using an .svg file as a background image for a few elements, but the elements would always have the ‘Broken Image’ icon displayed rather than the image.
This was happening even though I could see the .svg on the server, and the path was entirely accurate in the stylesheet. The error that the console gave me was:
Resource interpreted as Image but transferred with MIME type text/xml
It turns out that the HTTP headers were sending the wrong content along with the .svg. My website was receiving
text/xml, but should have been getting
The fix was simply adding the following rule to the .htaccess file in the directory that served the images. In my case this was the .htaccess file in the base directory of the WordPress installation.
AddType image/svg+xml svg
This tells the server to send .svg files with the mime-type
image/svg+xml. After a cache and cookie clear in my browsers, the images appeared!
If you do add this to WordPress’s .htaccess file, be sure to add it after the WordPress rules. If you don’t, your site will likely suffer some unexpected consequences.