Quale metodo di rilevamento del supporto SVG è il migliore?

Question

Qualcuno ha già asked my question about detecting SVG support in browsers ma ci sono tre soluzioni principali e non molte discussioni sui meriti di ciascuna.

Quindi: quale, se è il migliore? In termini di portabilità e correttezza, cioè. I falsi negativi (ad esempio "no svg") sono indesiderabili, ma accettabili; i falsi positivi non lo sono.

Allegato A:

var testImg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzUiIGhlaWdodD0iMjc1Ij48L3N2Zz4%3D'; 

var img = document.createElement('img') 

img.setAttribute('src',testImg); 

return img.complete; 

Exhibit B:

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

Allegato C:

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

Answer 1

avrei probabilmente usare modernizr.

Answer 2

Attualmente, Modernizr utilizza l'approccio B per rilevare il supporto per SVG nei tag <img> e l'approccio C per rilevare il supporto per SVG nei tag <embed> e <object>. Sembra che utilizzasse un approccio che era più simile ad A per il rilevamento del supporto "SVG as img", ma che è stato abbandonato a favore di B (per maggiori dettagli, vedi this post su trucchi CSS).

Di conseguenza, sembra che al momento sia B o C sia l'approccio migliore, a seconda di cosa esattamente si desidera testare.

Answer 3

Non è necessario includere l'intera libreria Modernizr per questo. Ecco un semplice controllo che ho ho usato in passato:

typeof SVGRect !== "undefined"; // true if supported, false if not 

Questo controlla semplicemente per il supporto dell'oggetto SVGRect che è definito nella SVG Specification. In Chrome typeof SVGRect è "function" e in IE9 è "object", ma nei browser che non supportano SVG (IE8, ad esempio) restituisce "undefined".

Con il codice di cui sopra, si può semplicemente:

if (typeof SVGRect !== "undefined") { ... /* If the browser does support SVG. */ } 
else { ... /* If the browser does not support SVG. */ }