Comment détecter un support pour VML ou SVG dans un navigateur

Question

J'écris un peu de javascript et j'ai besoin de choisir entre SVG ou VML (ou les deux, ou autre chose, c'est un monde étrange). Alors que je sais que pour le moment, seul IE supporte VML, je préfère de loin détecter les fonctionnalités que la plate-forme. SVG semble avoir quelques propriétés que vous pouvez rechercher: window.SVGAngle par exemple.

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

Existe-t-il un équivalent pour VML? Unfortuntaly - dans firefox Je peux tout à fait faire tout le rendu en VML sans erreur - rien ne se passe à l'écran. Il est assez difficile de détecter cette situation à partir d'un script.

Answer 1

Pour la détection VML, voici ce que google maps does (recherche "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 des éléments arbitraires à créer, y compris les éléments de VML (<v:shape>). Il semble que ce soit le test du adjacency attribute qui peut déterminer si l'élément créé est vraiment interprété comme un objet vml.

Pour la détection SVG, cela fonctionne bien:

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

Answer 2

Je vous suggère un coup sec à la réponse de crescentfresh - utilise

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 SVG. WebKit est actuellement très pointilleux sur les fonctionnalités de génération de rapports, et renvoie false pour feature#Shape malgré un support SVG relativement solide. L'alternative feature#BasicStructure est suggérée dans les commentaires à https://bugs.webkit.org/show_bug.cgi?id=17400 et me donne les réponses que j'attendais sur Firefox/Opera/Safari/Chrome (vrai) et IE (faux).

Notez que l'approche implementation.hasFeature ignore la prise en charge via les plugins, donc si vous souhaitez vérifier, par ex. 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 3

Vous pouvez passer cette étape et utiliser une bibliothèque JS qui vous permettra de faire des croquis de dessin vectoriel, si c'est l'intention. La librairie gérera alors ceci, produisant en SVG si supporté ou repli en canvas, VML, flash, silverlight, etc. sinon, selon ce qui est disponible.

Des exemples de bibliothèques qui le fera 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 4

Le contrôle SVG ne fonctionne pas pour moi dans Chrome, donc je regarde ce que la bibliothèque Moderniser ne dans leur chèque (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 5

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

Works, si vous supposez que les navigateurs non-SVG sont IE5.5 ou mieux et peuvent prendre en charge VML. Testé sur IE6, Firefox 8, Chrome 14.0. Raphael est très cool, mais il ne supporte pas le concept de groupes, ce qui peut être limitant en fonction de ce que vous faites. Dmitry me flambera probablement pour le dire, cependant.

Answer 6

D'autre part ... Lorsque vous voulez savoir avant de servir la page: Grattez cette page: http://caniuse.com/#cats=SVG&statuses=rec&nodetails=1 Pour l'agent navigateur/utilisateur entrant. Clause de non-responsabilité: Je ne l'ai pas encore implémenté. J'espère que caniuse.com publiera une API avec laquelle travailler.

MarkT

Answer 7

Vous pouvez consulter http://www.modernizr.com/docs/#features-misc car il contient un soutien pour la détection réelle de la capacité SVG par opposition à renifler l'agent utilisateur qui peut facilement être endommagé.

Answer 8

La vérification SVG ne fonctionnait pas dans Chrome car elle spécifiait la version 1.0. Cela devrait fonctionner mieux:

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