Chrome gives a warning when loading an SVG in an

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?

Looks similar to me: http://stackoverflow.com/questions/3768565/drawing-a-svg-file-on-a-html5-canvas — Petteri H, Feb 21 '11 at 12:43
It is, but that question lacks a proper answer to this question so I'm trying again. — shoosh, Feb 21 '11 at 12:47
I would treat this as a minor annoyance as you have categorized it. It doesn't affect your performance. And, am I correct to assume that jQuery and HTML5 Canvas are irrelevant here, that you get this warning just for having the `img src="...svg"`? — Phrogz, Feb 21 '11 at 13:22
jQuery is indeed irrelevant but the canvas is. If I didn't need to draw it on the canvas I could have used a different way to embed the SVG, for instance using ` — shoosh, Feb 21 '11 at 13:37
@shoosh Right, but even if you don't create a canvas or call `drawImage` you still see the warning, correct? So the question really is "Why does Chrome complain about this mime type when referencing SVG as an `img`?" — Phrogz, Feb 21 '11 at 13:41
@shoosh I'm afraid I have to vote to close this as a duplicate, based on [these suggestions for handling this situation](http://meta.stackexchange.com/questions/49491/etiquette-for-duplicate-yet-unanswered-questions/49493#49493). — Phrogz, Feb 21 '11 at 13:44
Modified the title to better reflect what this question is about. Thank you. — shoosh, Feb 21 '11 at 13:51
Happens in Safari 5, too (I don’t have 6 at hand to test) (Stack Overflow doesn’t allow more than 5 tags) — user535673, May 24 '13 at 07:56

score 22 · Answer 1 · answered Mar 23 '11 at 17:27

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.

1 Answers1