Menu
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?
672
To embed an SVG via an <img> element, you just need to reference it in the src attribute as you'd expect. You will need a height or a width attribute (or both if your SVG has no inherent aspect ratio). If you have not already done so, please read Images in HTML.
SVG (basic support) is Fully Supported on Google Chrome 94. If you use SVG (basic support) on your website or web app, you can double-check that by testing your website's URL on Google Chrome 94 with LambdaTest. The features should work fine.
If you are trying to use SVG like <img src="image. svg"> or as a CSS background-image , and the file is linked to correctly and everything seems right, but the browser isn't displaying it, it might be because your server is serving it with an incorrect content-type.
So I found a solution to display SVG image in Chrome browser with <object> tag. You can apply CSS rules by defining a class on the <object> tag like shown in above example. And you can also add width and height attributes on the <object> tag. I hope this will resolve your problem in Google Chrome Browser.
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.
51
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
