Fallback en JavaScript para SVG inline
Archivado en: SVG Fallback Javascript
Aunque SVG tiene un soporte bastante amplio, Android 2.3+ e IE9+. Si tienes que dar soporte a estos navegadores y quieres seguir usando todo el potencial de SVG Chris Coyier ha creado un pequeño script en JavaScript.
Cuando el navegador no soporta SVG el script añade un <span> y a este se le añade una clase que contiene un background-image con la misma imagen en formato PNG. Como veis es bastante simple y una solución bastante limpia.
A continuación el pen que ha creado Chris Coyier en CodePen
Y como Chris Coyier añade el fallback a un SVG que se ha creado a través de la etiqueta use he modificado un poco el código para que el fallback se aplique sobre un SVG a pelo.
En el tweet que ha publicado Chris Coyier podéis ver en la imagen que el fallback funciona perfectamente sobre Internet Explorer 8 en Windows XP
A fallback for inline <svg> can be: replace with <span> which has background-image as needed.http://t.co/WdpRs7FYyP pic.twitter.com/4yRoC6NcoV
— Chris Coyier (@chriscoyier) January 20, 2015
Recordar que existen tras soluciones de la que he hablado anteriormente en el blog para dar soporte a SVG en navegadores antiguos como SVGeezy y SVGMagic.
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).