How do you detect support for VML or SVG in a browser

javascript internet-explorer svg browser-detection vml
Jim T picture Jim T · Mar 17, 2009 · Viewed 36k times · Source

I'm writing a bit of javascript and need to choose between SVG or VML (or both, or something else, it's a weird world). Whilst I know that for now that only IE supports VML, I'd much rather detect functionality than platform.

SVG appears to have a few properties which you can go for: window.SVGAngle for example.

Is this the best way to check for SVG support?

Is there any equivalent for VML?

Unfortuntaly - in firefox I can quite happily do all the rendering in VML without error - just nothing happens on screen. It's quite hard to detect that situation from script.

Answer

mrec picture mrec · Apr 1, 2009

I'd suggest one tweak to crescentfresh's answer - use 

document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1")

rather than 

document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Shape", "1.0")

to detect SVG. WebKit is currently very picky about reporting features, and returns false for feature#Shape despite having relatively solid SVG support. The feature#BasicStructure alternative is suggested in the comments to https://bugs.webkit.org/show_bug.cgi?id=17400 and gives me the answers I expected on Firefox/Opera/Safari/Chrome (true) and IE (false).

Note that the implementation.hasFeature approach will ignore support via plugins, so if you want to check for e.g. the Adobe SVG Viewer plugin for IE you'll need to do that separately. I'd imagine the same is true for the RENESIS plugin, but haven't checked.

Related questions

internet explorer 10 not showing svg path (d3.js graph)

If I open this graph for example: http://bl.ocks.org/mbostock/1153292 in IE10, i just can't see the links between the nodes. Is there anything I can do in the code to make it possible to see even with …

Read More
Check if user is using IE

I am calling a function like the one below by click on divs with a certain class. Is there a way I can check when starting the function if a user is using Internet Explorer and abort / cancel it if …

Read More
Detect IE version (prior to v9) in JavaScript

I want to bounce users of our web site to an error page if they're using a version of Internet Explorer prior to v9. It's just not worth our time and money to support IE pre-v9. Users of all other …

Read More