Comment détecter le support de VML ou SVG dans un navigateur ?

Question

J'écris un peu de javascript et je dois choisir entre SVG et VML (ou les deux, ou autre chose, c'est un monde étrange). Je sais que pour l'instant seul IE supporte VML, mais je préfère détecter la fonctionnalité plutôt que la plateforme.

SVG semble avoir quelques propriétés que vous pouvez utiliser : window.SVGAngle par exemple.

Est-ce la meilleure façon de vérifier le support SVG ?

Existe-t-il un équivalent pour VML ?

Malheureusement - dans firefox je peux tout à fait faire tout le rendu en VML sans erreur - juste rien ne se passe à l'écran. Il est assez difficile de détecter cette situation à partir de script.

Answer 1

Je suggérerais une modification de la réponse de crescentfresh - utiliser

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

plutôt que

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

pour détecter le SVG. WebKit est actuellement très pointilleux sur la déclaration des fonctionnalités, et renvoie false pour feature#Shape malgré un support SVG relativement solide. L'alternative de feature#BasicStructure est suggérée dans les commentaires de https://bugs.webkit.org/show_bug.cgi?id=17400 et me donne les réponses que j'attendais sur Firefox/Opera/Safari/Chrome (true) et IE (false).

Notez que l'approche implementation.hasFeature ignore le support via les plugins, donc si vous voulez vérifier par exemple le plugin Adobe SVG Viewer pour IE, vous devrez le faire séparément. J'imagine que la même chose est vraie pour le plugin RENESIS, mais je n'ai pas vérifié.

Answer 2

La vérification SVG ne fonctionnant pas dans Chrome, j'ai regardé ce que la bibliothèque Modernizer fait dans sa vérification ( https://github.com/Modernizr/Modernizr/blob/master/modernizr.js ).

Sur la base de leur code, voici ce qui a fonctionné pour moi :

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

Answer 3

Pour la détection VML, voici ce qu'il faut faire google maps fait (recherche de " 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
}

Je vois ce que vous voulez dire à propos de FF : il permet de créer des éléments arbitraires, y compris des éléments vml ( <v:shape> ). Il semble que ce soit le test pour le attribut d'adjacence qui peut déterminer si l'élément créé est vraiment interprété comme un objet vml.

Pour la détection des SVG, cela fonctionne très bien :

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

Answer 4

Vous pouvez sauter cette étape et utiliser une bibliothèque JS qui vous permettra de réaliser des dessins vectoriels sur plusieurs navigateurs, si telle est votre intention. La bibliothèque s'en chargera, en produisant un fichier SVG s'il est pris en charge ou en se rabattant sur canvas, VML, flash, silverlight, etc. si ce n'est pas le cas, en fonction de ce qui est disponible.

Des exemples de bibliothèques qui feront cela sont, sans ordre particulier :

• 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;

Fonctionne, si l'on suppose que les navigateurs non-SVG sont IE5.5 ou mieux et peuvent supporter VML. Testé sur IE6, Firefox 8, Chrome 14.0.

Raphael est très cool, mais il ne prend pas en charge le concept de groupes, ce qui peut être limitatif en fonction de ce que vous faites. Mais Dmitry va probablement m'en vouloir de dire cela.