Issue with MIME types and serving svg: Resource in

Question

I'm targeting some SVG images with CSS to use as backgrounds on a few elements and having some strange issues. When going directly to the image it works fine, but when using in CSS I get the following error:

Resource interpreted as Image but transferred with MIME type text/xml

I've added an .htaccess file to the directory that serves the images with the following code, but it didn't help:

AddType image/svg+xml svg

Suggestions?

Answer 1

The probable explanation is that previously the HTTP headers specified a wrong content type, and now that you have fixed it, some software uses cached information. (Not uncommon when using XML files.) The simple way to check things out is to create a copy of the .svg file and refer to it in CSS using the new name.

When I test the URL you gave in a simple background rule, the image shows without problems on Firefox, IE, Chrome, Safari (tested on Win 7). But when I test this so that Content-Type: text/xml is sent by a server, all the browsers simply don’t show a background image; no error message is shown. So I suppose you tested with some special browser or with special settings.

Answer 2

Updating .htaccess did not work for me. I added following line in /etc/mime.types and restarted apache server, cleared cache and it worked.

image/svg+xml                   svg