SVG, posibildades y Saul Bass

Ya sabía que el formato SVG, al ser un formato de gráficos vectorial, se puede mostrar a diferentes tamaños sin pérdida de calidad. Pero las ventajas que supone van más allá de poder utilizar el mismo archivo para cualquier tamaño de pantalla, sus posibilidades son enormes.

El formato SVG permite animaciones, filtros, reutilizar sus partes, gran compresión sin pérdida de calidad o ser modificado 'al vuelo' con scripts. Las ideas que me sugiere son muchas así que he querido adentrarme en él y ya he probado a jugar con las animaciones o sacando partido de la reutilización que ofrece, aparte del uso habitual que ya venía haciendo del formato en mis desarrollos web. Aquí un par de ejemplos de cositas que he probado.

SVG morphing permalink

Este y otro tipo de animaciones me las imagino en infografías interactivas y mensajes de 'cargando...', entre las opciones más obvias, y otras más que espero pronto se plasmen en distintos proyectos.

Reutilizando SVG para optimizar una web permalink

La reutilización y los filtros que admite el formato pueden ser un gran aliado en la optimización web. En esta página inspirada en uno de los diseños de Saul Bass se aprovecha la escalabilidad del formato SVG y la reutilización que permite para hacer pasar por cuatro gráficos distintos el mismo trozo de SVG. En realidad se reutiliza ocho veces ya que el reborde de cada uno de ellos es la misma pieza con un filtro aplicado.

Puedes ver el resultado en Diseño web en Burgos.

Mi intención es continuar ampliando conocimientos en filtros y animaciones ya que los resultados que se pueden obtener son realmente interesantes.