How do you discover VML or SVG support in a browser?

Question

I am writing a bit of javascript and have to choose between SVG or VML (or both, or something else, this is a strange world). As long as I know that at the moment only IE supports VML, I would rather discover functionality than the platform.

SVG has several properties that you can use for: window.SVGAngle, for example.

Is this the best way to test SVG support?

Is there any equivalent for VML?

Unfortuntaly - in firefox, I can happily do all the visualization in VML without errors - just nothing happens on the screen. It is difficult to detect this situation from a script.

Answer 1

For VML detection, google maps here (search for " function Xd "):

 function supportsVml() { if (typeof supportsVml.supported == "undefined") { var a = document.body.appendChild(document.createElement('div')); a.innerHTML = '<v:shape id="vml_flag1" adj="1" />'; var b = a.firstChild; b.style.behavior = "url(#default#VML)"; supportsVml.supported = b ? typeof b.adj == "object": true; a.parentNode.removeChild(a); } return supportsVml.supported } 

I see what you mean about FF: it allows you to create arbitrary elements, including vml elements ( <v:shape> ). This seems to be a test for an attribute that can determine if the created element is really interpreted as a vml object.

For SVG detection, this works beautifully:

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

Answer 2

I would suggest one setting for crescentfresh answer - use

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

but not

 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 its relatively strong support for SVG. An alternative to feature#BasicStructure suggested in the comments on https://bugs.webkit.org/show_bug.cgi?id=17400 and gives me the answers I expected from Firefox / Opera / Safari / Chrome (true) and IE (false).

Please note that the implementation.hasFeature approach ignores support through plugins, so if you want to check, for example, the Adobe SVG Viewer plugin for IE, you will need to do this separately. I assume the same is true for the RENESIS plugin, but not tested.

Answer 3

SVG checking did not work for me in Chrome, so I looked at what the Modernizer library does in my check ( https://github.com/Modernizr/Modernizr/blob/master/modernizr.js ).

Based on their code, this is what worked for me:

 function supportsSVG() { return !!document.createElementNS && !!document.createElementNS('http://www.w3.org/2000/svg', "svg").createSVGRect; } 

Answer 4

You might want to skip this and use the JS library, which will allow you to do cross-browser vector graphics if that is the intention. The library will then handle this, outputting to SVG, if supported or reverted to canvas, VML, flash, silverlight, etc. If not, depending on what is available.

Examples of libraries that will do this do not have a specific order:

• dojo.gfx ( http://docs.dojocampus.org/dojox/gfx/ )
• Raphaël ( http://raphaeljs.com/ )
• SVGWeb ( http://code.google.com/p/svgweb/ )

Answer 5

 var svgSupport = (window.SVGSVGElement) ? true : false; 

It works if you assume that browsers other than SVG, IE5.5 or higher and can support VML. Tested on IE6, Firefox 8, Chrome 14.0.

Rafael is very cool, but he does not support the concept of groups, which may be limited depending on what you do. Probably, Dmitry, perhaps, will speak to me for this.

Answer 6

You might want to check out http://www.modernizr.com/docs/#features-misc as it contains support for actually detecting SVG capabilities, as opposed to a sniffing user agent that can be easily damaged.

Answer 7

SVG-check did not work in Chrome because it indicates version 1.0. This should work better:

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

Answer 8

On the other hand ... When you want to find out before serving the page: Clear this page: http://caniuse.com/#cats=SVG&statuses=rec&nodetails=1 For the incoming browser / user agent. Disclaimer: I have not implemented this yet. Since I hope caniuse.com will publish an api for work.

Markt