javascript - una - sintaxis svg

¿Qué método de detección de soporte SVG es mejor?

Question

Alguien ya ha hecho mi pregunta sobre la detección del soporte SVG en los navegadores, pero hay tres soluciones principales y no hay mucha discusión sobre los méritos de cada uno.

Entonces, ¿cuál es el mejor? En términos de portabilidad y corrección, eso es. Los falsos negativos (es decir, "no svg") son indeseables, pero aceptables; los falsos positivos no lo son.

Anexo A:

var testImg = ''data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzUiIGhlaWdodD0iMjc1Ij48L3N2Zz4%3D'';
var img = document.createElement(''img'')
img.setAttribute(''src'',testImg);
return img.complete; 

Anexo B:

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

Anexo C:

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

Answer 1

Actualmente, Modernizr utiliza el enfoque B para detectar el soporte para SVG en las etiquetas <img> , y el enfoque C para detectar el soporte para los SVG en las etiquetas <embed> y <object> . Parece que solía usar un enfoque que era más como A para detectar el soporte "SVG as img", pero se descartó en favor de B (para más detalles, consulte esta publicación sobre trucos de CSS).

En consecuencia, parece que en este momento, B o C sería el mejor enfoque, dependiendo de qué es exactamente lo que desea probar.

Answer 2

No es necesario incluir la biblioteca Modernizr completa para esto. Aquí hay un simple cheque que he usado en el pasado:

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

Esto simplemente verifica la compatibilidad del objeto SVGRect que se define en la Especificación SVG . En Chrome typeof SVGRect es "function" y en IE9 es "object" , pero en los navegadores que no admiten SVG (IE8, por ejemplo), devuelve "undefined" .

Con el código anterior, puede simplemente:

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

Answer 3

Probablemente usaría modernizr .