Question

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 1

For VML detection, here’s what google maps does (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 arbitrary elements to be created, including vml elements (<v:shape>). It looks like it’s the test for the adjacency attribute that can determine if the created element is truly interpreted as a vml object.

For SVG detection, this works nicely:

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