Menu
javascript: How to detect SVG in HTML img element support?
I tried this, but it doesn't work:
x = new Image();
x.onload = function(){
if (x.width) {
alert('svg in img tag supported!');
}
};
x.src = 'test.svg';
226
SVG images can be used as an image format, in a number of contexts. Browsers support SVG images in: HTML <img> or <svg> elements.
SVG images can be written directly into the HTML document using the <svg> </svg> tag. To do this, open the SVG image in VS code or your preferred IDE, copy the code, and paste it inside the <body> element in your HTML document. If you did everything correctly, your webpage should look exactly like the demo below.
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.
SVG works together with HTML, CSS and JavaScript.
A good discussion/comparison of methods is here: http://www.voormedia.nl/blog/2012/10/displaying-and-detecting-support-for-svg-images
Based on that page, I wound up using this:
svgsupport = document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1")
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
