SVGMagic fallback para sustituir SVG por PNG

Archivado en: Diseño Web jQuery SVG

Vamos con SVGMagic otro fallback para sustituir SVG por PNG en navegadores que no soportan SVG, los navegadores que no dan soporte a SVG son Android 2.1, 2.2 y 2.3 y en esta fiesta no puede faltar nuestro queridísimo Internet Explorer 8.

Esta vez el fallback emplea jQuery, lo mejor de SVGMagic es que no necesitamos tener una carpeta extra con los archivos en formato PNG, el propio plugin se encarga de enviar y transformar los SVG en PNG y en caso de que el navegador no tenga soporte para mostrar SVG el plugin se encarga de servir los PNG. Excelente. También transforma los SVG que utilizamos como fondo en background-image, para ello hay que añadir un código extra que veremos a continuación.

Instalación

La instalación es bastante sencilla, simplemente incluimos en el header el código que vemos a continuación.

1
2
3
4
5
6
<script src="SVGMagic.min.js"></script>
<script>
    $(document).ready(function(){
        $('img').svgmagic();
    });
</script>

Si utilizamos SVG en nuestros background-image añadimos lo siguiente.

1
2
3
4
5
6
7
8
<script src="SVGMagic.min.js"></script>
<script>
    $(document).ready(function(){
        $('.bgimage').svgmagic({
            backgroundimage: true
        });
    });
</script>

La demo de SVGMagic

El repositorio en GitHub

SCALABLE, un libro sobre SVGA lo largo de 15 capítulos, 120 páginas y más de 70 ejemplos vamos a ver todo lo que podemos hacer con SVG. Tu pones el precio, disponible desde 0$ para descargar desde LeanPub(PDF, ePUB y MOBI).