Estamos en un momento en el que la animación vectorial toma una posición destacada en el diseño web, y aunque por ahora naciente, esta técnica se perfila como una de las grandes tendencias creativas que están por venir. Y no es para menos.

Esta vertiente se basa en recursos vectoriales SVG (que datan de 1999), pero la técnica de dinamizarlos orientándolos al entorno web no comienza a extenderse hasta 2012. Esto se debe tanto a las incompatibilidades que tenía entre navegadores como por el desconocimiento de las posibilidades que esta tecnología tenía a efectos de animación, así como a las dudas sobre la capacidad de ciertos dispositivos para reproducirla con un rendimiento adecuado. De hecho, hace mucho que convivimos con vectores gráficos escalables en forma de iconos vectoriales, pero aplicar la animación a estos recursos comienza a ser una realidad cada vez más extendida.

Los newbies que tuvimos la suerte de dar en 2013 con aquella mítica animación de una review de Playstation4 que dibujaba la consola de forma dinámica en la pantalla, nos dedicamos a limpiar la saliva de nuestros teclados con una unánime conclusión: dinamizar cosas a través de Gráficos Vectoriales Escalables (SVG), mola.
Texto con efectoUn texto que reza “MOLA” y se dibuja de forma sincronizada

Por qué debes aprender a realizar animaciones con SVG

Con un conocimiento básico de esta tecnología podrás incluir recursos y detalles en plataformas online que, aparte de posicionarte como uno de los precursores de esta tendencia que comienza a coger fuerza, dará un alto valor añadido a tu proyecto a nivel estético y tecnológico, y un punto de sofisticación diferencial.

Enriquecer la experiencia de usuario a través de esta técnica aumentará el grado de atención del visitante y la percepción cualitativa respecto al proyecto, ofreciendo una estupenda oportunidad para orientar y estimular su respuesta emocional.

Y tampoco vamos a engañarnos: necesitas conocimientos de diseño vectorial para hacer composiciones avanzadas. Si te manejas con Illustrator, Sketch o programas similares, no te lo pienses y conoce cómo orientar tus trabajos al entorno online y cómo aplicar animaciones sobre los mismos. Y si no, aprovecha todos los recursos online que existen para utilizar vectores gratuitos o crea los tuyos propios, que por sencillos que vayan a ser, la aportación que supondrá sobre tus trabajos será enorme. No descartes terminar decidiéndote por aprender alguno de estos programas, porque engancha.

Más abajo pongo a vuestra disposición tutoriales que regularmente crearé sobre esta técnica para los que no son necesarios conocimientos de diseño vectorial.

Ventajas de la animación vectorial SVG

  • Peso: SVG es XML, es decir, código que apenas requiere unas líneas de caracteres interpretables por los navegadores, y como código que es, puede ser comprimido en GZIP. En este ejemplo vemos una imagen superior (9kb) y su equivalente vectorial (3kb en GZIP) en el que además aprovechamos mínimamente sus capacidades de dinamización:
    Representación de formas vectoriales en mapas de bits
  • Compatibilidad: la compatibilidad de SVG entre navegadores es universal a día de hoy. Asimismo, la naturaleza vectorial de SVG lo hace escalable y apto para pantallas de retina en cualquiera de sus resoluciones y densidades: no pixela, no difumina (del gif mejor no hablamos) y es estable hasta para su impresión.
  • Flexibilidad: podemos aplicar estilos y/o animaciones a composiciones en SVG mediante CSS puro o junto con Javascript, idóneo para un perfil de diseñador web.
  • Versatilidad: las animaciones mediante SVG no se limitan a dibujar líneas: mapas multi nivel, tablas periódicas dinámicas, efectos de transición (utiliza los cursores del teclado para navegar), efectos en botones, indicadores dinámicos de menús… la lista de usos es interminable.
  • Interacción: la compatibilidad de SVG con CSS y Javascript abre un amplio abanico de opciones para interactuar con el visitante:
  • Comunidad: los diseñadores web que dominan esta técnica son una legión que no para de crear y compartir sus recursos con el mundo. Inspirarse y aprender a través de una ingente cantidad de piezas en constante crecimiento es siempre un punto a favor.
  • Librerías: existen potentes librerías -la mayoría gratuitas y open source– para crear componentes SVG complejos orientadas a todos los objetivos: desde la presentación de datos dinámicos de gran volumen como d3.js (perfecto para Big Data) hasta la animación y dinamización del entorno web como Snap.svg o Velocity. Sus demos hablan por sí solas, y la lista de librerías a este efecto está en constante crecimiento.
  • Accesibilidad: SVG puede (y debe) contener información que facilite su identificación a efectos de accesibilidad: es compatible con un amplio abanico de etiquetas y de atributos aria que además hacen las funciones de indexación para los motores de búsqueda. Asimismo, y a diferencia del <canvas>, SVG se compone de nodos reconocibles como parte del DOM, aportando una facilidad adicional durante su desarrollo. En este ejemplo puedes ver dos formas idénticas: la primera es un SVG, la segunda un Canvas. ¿Cuál de las dos es accesible y por tanto te permite editar su color mediante tu inspector de código?

Inconvenientes de la animación vectorial SVG

  • Complejidad de desarrollo e implantación: el universo SVG suele ser un campo desconocido y ciertamente complicado para un perfil de diseñador web. Su comprensión e implantación en plataformas web no es sencilla y la creación de composiciones vectoriales avanzadas requiere conocer herramientas de edición vectorial tales como Adobe Illustrator o Inkscape.
  • Perfil profesional: ¿Quién se supone que se ocupa de esto? Un diseñador web no suele tener capacidad para diseñar vectores avanzados que dinamizar, incluso teniendo conocimientos de Javascript. Un diseñador gráfico sí se defiende con soltura en el ámbito de la creación vectorial pero no suele conocer cómo orientar el diseño de los mismos a un entorno web, y menos aún su manipulación en este. Existe una brecha entre código y diseño en la que se encuentra SVG
  • Rendimiento: un exceso de animaciones vectoriales puede suponer problemas de rendimiento, sobretodo en dispositivos móviles. El SVG, al ser renderizado y animado en el dispositivo cliente, corre el riesgo de llegar a requerir una cantidad de recursos excesiva para algunos dispositivos si no tenemos un poco de mesura en su animación. En este test de rendimiento puedes ver cómo se reducen los fotogramas por segundo que tu navegador puede procesar según aumentan los recursos necesarios para renderizar un SVG de complejidad creciente. Aunque todo sea dicho, detectar qué dispositivo está accediendo a nuestra web y modificar o prescindir de aquellos recursos estéticos susceptibles de generar una sobrecarga es viable y muy sencillo con herramientas como Modernizr. No es para tanto.

Tutoriales de animación vectorial con SVG

De forma regular publicaré tutoriales de creación de recursos de animación vectorial que, comenzando desde las bases y enfocados a un perfil de diseñador web, te permitirán conocer los fundamentos de esta técnica de una forma práctica, gradual y sin conocimientos previos de ningún software.
Ver serie completa de tutoriales de animación web SVG
Si ya te has decidido por sumergirte en este estimulante universo, adelante. La animación vectorial mola.