La herramienta web que traemos permite configurar color, tamaño y otros parámetros de una colección de patrones disponibles y generar fondos en formato SVG para implementarlos en nuestra web GESIO®. SVGeneration generará automáticamente el SVG y el código CSS que deberemos implementar en nuestra web.
Pero ¿Qué es SVG?
Los archivos SVG son gráficos vectoriales escalables (Scalable Vector Graphics). Para las nuevas tecnologías como retina display y sitios con diseños responsive, este tipo de imágenes pueden ser útiles ya que podremos redimensionarlas sin tener que preocuparnos por el pixelado.
Los gráficos SVG están ampliamente soportados por los principales navegadores actuales, aún así deberemos tener claro que no funcionarán en explorer 8, firefox 3.6, safari 5, opera 9 y versiones antiguas de los principales navegadores móviles, por lo que deberás tener muy clara cual será tu audiencia mayoritaria (por ejemplo en muchas oficinas y organismos oficiales se siguen usando versiones muy antiguas de Internet Explorer) y si esta no se verá muy afectada por el uso de este tipo de imágenes.
SVGeneration nos propone varias opciones para que el fondo de nuestra web se degrade correctamente en navegadores antiguos:
1. Mejora progresiva
Mejora Progresiva significa que cada visitante debe, como mínimo, ser capaz de ver el contenido, pero si el usuario tiene un navegador más reciente verá más características y efectos.Esto significa que si tus visitantes no admiten gráficos SVG, entonces simplemente no ll verán, el css generado por SVGeneration incluye una regla "background-color:” Que mostrará el color de fondo indicado en los navegadores antiguos como Internet Explorer 6, 7 y 8.
Esta es sin duda la solución más fácil, aunque puede no ser aceptable para algunos sitios web. Recomendamos probar la página en navegadores antiguos para verificar que su contenido se mantiene legible.
2. degradación elegante
Este método requiere el uso de javascript para identificar si el navegador del cliente no admite gráficos SVG y proporcionar una imagen png que lo sustituya. Este método requiere más trabajo, pero suele ser la mejor opción.
SVGenerator propone usar la biblioteca JS Modernizr, que cargua un archivo js función de si existe o no el apoyo svg. Este es un ejemplo de cómo podría funcionar Modernizr:
Modernizr.load ({
prueba: Modernizr.svg,
sip: 'svg.js',
nop: 'no-svg.js'
});
Sugieren que el javascript aplique una classe css, "svg" o "no-svg ', a los elementos que utilizan fondos svg. Aunque este es sólo uno de muchos métodos posibles.
