html - Chrome gives a warning when loading an SVG in an <img>

Question

In order to display an SVG image file onto a canvas I have the following line on the HTML:

<img id="soundOnImg" src="img/speaker_on.svg" style="display:none"></img>

and then to draw it on the canvas I do:

ctx2d.drawImage($("#soundOnImg")[0], 10, 10, 200, 200);

(using jQuery $() there)

This works perfectly except for one annoyance - Chrome gives me the following warning:

Resource interpreted as image but transferred with MIME type image/svg+xml.

What does this warning mean?

I tried using <object> instead of <img> but this fails since the object element doesn't seem to have a [0] for some reason.

How can I fix this?

Answer 1

This is a bug in the WebKit code bundled with Chrome. WebInspector.Resource._checkWarning() calls WebInspector.Resource._mimeTypeIsConsistentWithType() to check the mime-type of the resource. This function checks the value against the WebInspector.MIMETypes object, which does not contain an entry for SVG images.

This does not appear to be fixed in WebKit trunk, so you should probably report it as a bug.