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 image/svg+xml
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.
Hi, is there a way around needing to modify the .htaccess file? Perhaps using PHP? Thanks
Do you have access to httpd.conf? It should be located at ‘apache/conf/httpd.conf’
If so, edit that and look for:
and ensure that the following lines exist:
I am hosting my site on a friends server and he is a bit touchy about me editing important shared files… anyway, thanks for your help, all up and running now =]
Hoho yeah! That totally fixed what I had been wasting hours messing around with! My site is hosted on Lunarpages and would not display a simple little svg file in a “back to top” button element if the svg was hosted on my site, yet it would display if I linked to it on the codyhouse.co website that provided the element. Now I don’t have to link to the file on their server. THANKS!!
I’m glad that helped!