El auge de los dispositivos móviles como smartphones y tablets y sus muchas variantes, nos han hecho re-pensar la forma en la que creamos sitios web. Tuvimos que adaptarnos e implementar paradigmas como el Diseño Web Adaptable (Responsive Design) para mostrar versiones optimizadas de la misma página web en distintas resoluciones y orientaciones de pantalla. Pero, ¿Es el diseño adaptable suficiente? La respuesta es claramente no. Eso además de que aunque la tecnología usada para hacer efectivo el Responsive Design, los Media Queries de CSS3, pueden hacer muchas cosas más que detectar la resolución y la orientación de la pantalla, no suelen ser usadas para otros tipos de detección de características en el dispositivo del usuario.
Un avance importante en las pantallas de los dispositivos móviles ha sido el aumento de la densidad de pixeles. Esto es conocido comúnmente como bajo el nombre de tecnologías como Retina Display o Super AMOLED. La mayor cantidad de pixeles en estos dispositivos cambian por completo la forma en los que se muestran gráficos hechos en mapas de bits (JPG, PNG, GIF, etc). Al duplicarse la densidad de pixeles de la pantalla, estos gráficos (sean imágenes, iconos, etc) se ven estirados o ‘pixeleados’.
Ejemplo: un ícono hecho en PNG y con un tamaño en pixeles fijo, perderá calidad (se ‘pixeleará’) en una pantalla Retina Display. ¿La solución? Gráficos vectoriales. Hoy en día tenemos más de una solución para implementar gráficos vectoriales, que a diferencia de los gráficos basados en mapa de bits, sus formas están compuestas por vectores y no por pixeles, por lo tanto nunca veremos el efecto de ‘pixelación’ y el gráfico siempre lucirá liso. Una de esas soluciones que está siendo usada cada vez con más fuerza son los gráficos SVG (Gráficos Vectoriales Redimensionables por su siglas en inglés). En el siguiente gráfico, vemos como luce un ícono en PNG con cantidad de pixeles fija (izquierda) en una pantalla de alta densidad, que luciría bien en pantallas regulares, junto a un gráfico SVG (derecha).
Ventajas y uso
Entre las ventajas de los gráficos SVG, además de lucir muy bien en pantallas de alta densidad, tenemos además que suelen ser muy ligeras, mucho menos pesadas que sus equivalentes en JPG o PNG y además se pueden escalar a cualquier tamaño, siempre sin perder la calidad; entre otras muchas características interesantes. Los SVG se pueden usar básicamente como cualquier imagen regular, dentro de la etiqueta <img> de HTML. Sin embargo, ciertos navegadores antiguos como IE8 no soportan SVG insertado como imagen regular. Para ello, si es que aún les interesa dar soporte a IE8, hay interesantes soluciones para ello.
Conclusión
Sin duda los gráficos SVG forman parte del presente y futuro de la web. Además de sus ventajas que nos permiten mostrar gráficos más compactos, lisos y bien presentados en todo tipo de pantallas sean regulares o de alta densidad, tenemos la posibilidad de contar con sitios más livianos y por ende podremos lograr una ligera pero significativa mejora en la performace de nuestros sitios o aplicaciones web.
