Come si rileva il supporto per VML o SVG in un browser

Question

Sto scrivendo un po 'di javascript e devo scegliere tra SVG o VML (o entrambi, o qualcos'altro, è un mondo strano). Anche se so che per ora solo IE supporta VML, preferirei piuttosto rilevare le funzionalità rispetto alla piattaforma.

SVG sembra avere alcune proprietà che è possibile selezionare: window.SVGAngle ad esempio.

È questo il modo migliore per verificare il supporto SVG?

Esiste un equivalente per VML?

Unfortuntaly - in firefox Posso tranquillamente fare tutto il rendering in VML senza errori - non succede nulla sullo schermo. È abbastanza difficile rilevare questa situazione dalla sceneggiatura.

Answer 1

Per il rilevamento VML, ecco cosa google maps does (ricerca per "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 
} 

Capisco cosa vuoi dire riguardo FF: consente elementi arbitrari da creare, compresi gli elementi VML (<v:shape>). Sembra che sia il test per lo adjacency attribute che può determinare se l'elemento creato è veramente interpretato come un oggetto vml.

Per il rilevamento SVG, questo funziona bene:

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

Answer 2

io suggerirei un ritocco risposta di per crescentfresh - uso

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

piuttosto che

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

per rilevare SVG. WebKit è attualmente molto schizzinoso sulle funzionalità di reporting e restituisce false per feature#Shape nonostante abbia un supporto SVG relativamente solido. L'alternativa feature#BasicStructure è suggerita nei commenti a https://bugs.webkit.org/show_bug.cgi?id=17400 e mi dà le risposte che mi aspettavo su Firefox/Opera/Safari/Chrome (true) e IE (false).

Si noti che l'approccio implementation.hasFeature ignorerà il supporto tramite plug-in, quindi se si desidera verificare ad es. il plug-in Adobe SVG Viewer per IE dovrai farlo separatamente. Immagino che lo stesso sia vero per il plugin RENESIS, ma non ho controllato.

Answer 3

È possibile saltare questo e utilizzare una libreria JS che consente di eseguire il cross-browser di disegno vettoriale, se questa è l'intenzione. La libreria gestirà quindi questo, trasmettendo a SVG se supportato o fallback su tela, VML, flash, silverlight, ecc. Se non, a seconda di ciò che è disponibile.

Esempi di librerie che faranno questo sono, in nessun ordine particolare:

• dojo.gfx (http://docs.dojocampus.org/dojox/gfx/)
• Raphaël (http://raphaeljs.com/)
• SVGWeb (http://code.google.com/p/svgweb/)

Answer 4

Il controllo SVG non ha funzionato per me in Chrome, così ho guardato a ciò che la biblioteca modernizzatore fa nel loro assegno (https://github.com/Modernizr/Modernizr/blob/master/modernizr.js).

Sulla base del loro codice, questo è ciò che ha funzionato per me:

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

Answer 5

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

Works, se si assume che i browser non-SVG sono IE5.5 o superiore e in grado di supportare VML. Testato su IE6, Firefox 8, Chrome 14.0.

Raphael è molto bello, ma non supporta il concetto di gruppi, che può essere limitato a seconda di ciò che si sta facendo. Dmitry probabilmente mi licenzierà per averlo detto, però.

Answer 6

D'altra parte ... Quando si vuole sapere prima di servire la pagina: Raschiare questa pagina: http://caniuse.com/#cats=SVG&statuses=rec&nodetails=1 Per l'agente del browser/utente in entrata. Disclaimer: Non l'ho ancora implementato. Come spero che caniuse.com pubblichi una API con cui lavorare.

Markt

Answer 7

Si consiglia di controllare http://www.modernizr.com/docs/#features-misc in quanto contiene il supporto per il rilevamento effettivo della capacità di SVG in contrasto con user-agent sniffing che può essere facilmente danneggiata.

Answer 8

Il controllo SVG non ha funzionato in Chrome perché specifica la versione 1.0. Questo dovrebbe funzionare meglio:

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