Hace tiempo que algunos exploradores soportan el formato SVG de imagen, la traducción de las siglas es Scalable Vector Graphics, la novedad es que, al contrario de todos los otros formatos que se utilizaban hasta ahora tales como PNG, JPG o GIF, las SVG permiten escalarse sin perder la calidad, son lo que hasta ahora conocíamos como vectores y que solo podían utilizarse para diseñar. Además de esto, poseen dos ventajas, en la mayoría de los casos son más livianos y por lo tanto se descargan más rápido también.
Quienes estén en el mundo del diseño web desde hace años, sabrán las posibilidades que ofrecía Flash con estas imágenes de tipo vector, pues gracias a la inclusión del formato en los navegadores, estos SVG pueden ser manipulados a traves de CSS o JavaScript de la misma forma en la que en el pasado animábamos botones.
Descargar Interactive Infographic with SVG and CSS animations | Ver Demo | Codrops
Es así como fue realizada esta infografía interactiva y es solo uno de los usos que puede darse a este nuevo formato de imágen, en si el formato no es nuevo pero si lo es la posibilidad de manipularlo a traves de herramientas de estilización de diseño y desarrollo web. Podrán revisar la forma en la que está construída y las formas de modificar los distintos elementos.
Aquí solo se animaron los círculos, pero en realidad pueden animar fechas, agregar movimiento en la línea de tiempo, así como modificar las imágenes con las que consigan ustedes. En el sitio hay un tutorial de cómo obtener y crear los SVG, verán que una vez que se acostumbren no querrán utilizar otra cosa ya que la calidad de la imagen les permite abarcar otro rango de posibilidades.
