Hi,
I found that there is no SVG support checking to jQuery.support.
Initially I though it would be a true/false matter, to differentiate between IE and everyone else. This is not true though, as Firefox and Opera have their preferred method of displaying SVG, and WebKit has their own.
Firefox likes to display SVG from an <object> tag, Webkit likes better href'ing it in the <img> tag. IE does not support it at all, but can be coerced to it with the svgweb toolkit. This uses yet another, different <object> syntax, incompatible with Firefox.
here is some partial, un-jquery detection code:
-
function SVGSupport() {
return [
document.implementation.hasFeature(
"http://www.w3.org/TR/SVG11/feature#BasicStructure",
"1.1"),
document.implementation.hasFeature(
"http://www.w3.org/TR/SVG11/feature#Shape",
"1.0")]
}
it returns an array of 2 true/false values. If the second is true, you are on Firefox/Opera. (objectFF syntax)
Else, if the first is true, you are on Webkit (img syntax)
Else, you're hosed. (IE+svgweb or non-svg graphic)
The above code is non-jqueryfied and not comprehensive. I am just trying to use svg files in the same manner we use traditional images. Namely, I have not tried to check for inline SVG support.
I think a possible solution would be to have a single property: jQuery.support.svg ; which would return an array of strings. If the browser likes the <object> syntax, it would contain 'object' string. If it likes the <img> syntax, it would also contain 'img'. If it also properly supports the inline syntax, it would also contain 'inline'. If there are more idiosyncrasies to detection, more keywords can be added, since I am no expert to SVG detection. Any combination of these parameters would be possible inside the the array. We can guess Internet Explorer up to 8 would have jQuery.support.svg return [], in which case we will either use SVGWeb (or any other solution) or replace with another type of graphic.
This way we have a single property for SVG detection, with an easy way to look for the 'flavor' of SVG we want - inline or external reference - and be able to use the right syntax for the browser.