Adición de gráficos vectoriales escalables (SVG) en un navegador no compatible
En una publicación anterior de esta serie, mencionamos un poco sobre el escollo de SVG con los navegadores antiguos y el uso de Raphael.js para servir el gráfico como una solución alternativa. En este post vamos a echar un vistazo a este asunto más a fondo..
La idea es simple, seguiremos usando elementos SVG como la forma principal de entregar gráficos en nuestra página web, pero al mismo tiempo también proporcionaremos una función de respaldo. para que aún pueda ser procesado en navegadores no compatibles.
Claro, hay muchos caminos que podemos tomar, pero solo veremos dos soluciones que creo que son una mejor solución genérica. Entonces, veamos cómo podemos hacerlo..
Usando Elemento Objeto
Además de colocarlo directamente en un documento HTML, hay varias formas de incrustar SVG. Por ejemplo, si almacenamos el gráfico en .svg archivo, podemos usar el elemento.
Para el propósito de demostración, hemos agregado un logotipo de Apple con SVG a nuestra página web. Sin embargo, los navegadores no compatibles permanecerán vacíos. Para resolver el problema, podemos servir un gráfico de mapa de bits, de la siguiente manera;
De esta manera, los navegadores compatibles seguirán tomando el .svg, mientras los navegadores no compatibles llevarán el gráfico de mapa de bits. Hemos añadido el “png” Marque debajo del logotipo de Apple para rastrear qué gráfico se entrega..
Sin embargo, como hemos mencionado en el otro post., Los gráficos de mapa de bits no son tan flexibles y escalables como SVG. Entonces, echemos un vistazo a otra solución..
Utilizando modernizr
Otro método que podemos usar es usando Modernizar. Para aquellos de ustedes que no están familiarizados con esta biblioteca de JavaScript, no se preocupen, tendremos una publicación dedicada para cubrirlos. Por ahora, solo sigue con nosotros.
En primer lugar, vamos a preparar algunas bibliotecas de JavaScript requeridas., Modernizr.js y Raphael.js. Entonces, también tenemos que convertir nuestros .svg archivo en un formato compatible con Raphael con esta herramienta, ReadySetRaphael.js, y guarde la salida en un archivo separado .js expediente; llamémoslo svg.js.
Incluya el Modernzr.js en el documento HTML, así:
Y para los otros dos archivos., raphael.js y svg.js, lo cargaremos condicionalmente, Solo cuando se ve en navegadores no compatibles.
Con Modernizr podemos detectar la capacidad del navegador, en este caso detectaremos si el navegador es capaz de representar SVG, y si no lo está, le enviaremos el script:
if (! Modernizr.inlinesvg) document.write (''
