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 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.

5 thoughts on “Fixing SVG Mime-Type/CSS Errors”

    1. Do you have access to httpd.conf? It should be located at ‘apache/conf/httpd.conf’

      If so, edit that and look for:

      <IfModule mime_module>

      and ensure that the following lines exist:

      AddType image/svg+xml svg svgz
      AddEncoding gzip svgz
  1. 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 website that provided the element. Now I don’t have to link to the file on their server. THANKS!!

Leave a Reply

Your email address will not be published.