Chrome is not loading SVG File as image/svg+xml

Question

I have a SharePoint web page that references a SVG file stored in the RootFolder of a SharePoint list inside the img tag:

<img src='http://localhost/Lists/MyList/1/1.svg' type='image/svg+xml' />

The image is rendered correctly in IE9 on the desktop as well as on iOS devices (Safari). However, in Chrome on Windows (I am using v14 at the moment) it fails to display. It instead renders the broken image icon.

The networking tab in Chrome reveals that the file 1.svg is downloaded as application/octet-stream (and hence the incorrect rendering). What do I need to change so that Chrome is recognizing the MIME type correctly (as specified in the tag)? Could it be a bug in Chrome (as suggested in this SO answer)? If so, is there a work-around to load the SVG file in another way (e.g., embed tag maybe)?

Note that IE's debugger (F12) correctly identifies the type as image/svg+xml and hence renders the image as expected.

Edit: Since it appears to be a server-side issue (thanks @robertc) I have added the fact that the file is served by SharePoint, suspecting that SharePoint might not recognize the MIME type.

Answer 1

There is no attribute type on the img element, you need to set the MIME type correctly on the server. I think it only works in IE because it's doing content sniffing.

On IIS7 and above you can specify MIME type mappings in the web.config file in the system.webServer section:

<staticContent>
  <mimeMap fileExtension=".svg" mimeType="image/svg+xml"/>
</staticContent>

After that it should work in all browsers, but you may need to do a force refresh (Ctrl + F5) to get them to request the file again.