How do you detect support for VML or SVG in a browser
JavascriptInternet ExplorerSvgBrowser DetectionVmlJavascript Problem Overview
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.
Javascript Solutions
Solution 1 - Javascript
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.
Solution 2 - Javascript
The SVG check didn't work for me in Chrome, so I looked at what the Modernizer library does in their 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;
}
Solution 3 - Javascript
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")
}
Solution 4 - Javascript
You might like to skip this and use a JS library which will allow you to do vector drawing cross-browser, if that's the intention. The library will then handle this, outputting to SVG if supported or fallback to canvas, VML, flash, silverlight, etc if not, depending on what's available.
Examples of libraries that will do this are, in no particular order:
- dojo.gfx (http://docs.dojocampus.org/dojox/gfx/)
- Raphaël (http://raphaeljs.com/)
- SVGWeb (http://code.google.com/p/svgweb/)
Solution 5 - Javascript
var svgSupport = (window.SVGSVGElement) ? true : false;
Works, if you assume that non-SVG browsers are IE5.5 or better and can support VML. Tested on IE6, Firefox 8, Chrome 14.0.
Raphael is very cool, but it does not support the concept of groups, which can be limiting depending on what you are doing. Dmitry will probably flame me for saying so, though.
Solution 6 - Javascript
You may want to check out http://www.modernizr.com/docs/#features-misc as it contains support for actual detection of SVG capability as opposed to user-agent sniffing which can be easily corrupted.
Solution 7 - Javascript
The SVG-check did not work in Chrome because it specifies version 1.0. This should work better:
document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Shape", "1.1")
Solution 8 - Javascript
On the other hand... When you want to know before you serve the page: Scrape this page: http://caniuse.com/#cats=SVG&statuses=rec&nodetails=1 For the incoming browser/user agent. Disclaimer: I've not yet implemented this. As I'm hoping caniuse.com will publish an api to work with.
MarkT