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>