Introducción a la animación SVG con imágenes Vectoriales

El avance ultrarrápido de la tecnología digital en una época en la que las empresas son juzgadas por sus sitios web e interfaces de usuario abrió espacio para un formato de imagen vectorial ligero y escalable con soporte para animación e interactividad: el SVG.

Hoy, los diseñadores y desarrolladores pueden optar por animar el SVG con CSS, SMIL o JavaScript. Si eligen JavaScript, pueden elegir entre bibliotecas como GSAP, Snap.svg, SVG.js y Velocity.js, solo por nombrar algunas. Y, por supuesto, también pueden elegir el camino difícil y animar con JavaScript sin procesar. Para aquellos que evitan la codificación, existen otras excelentes opciones, como SVGator, Keyshape, Lottie y SpiritApp. 

Obviamente, existe una amplia gama de aplicaciones increíbles para la animación SVG al alcance de la mano. Sin embargo, según W3Techs, a pesar de los muchos beneficios de SVG, en 2020 se utiliza solo con la misma frecuencia que su competidor rasterizado, GIF, con una tendencia de uso del 22% cada uno.

Puede parecer historia antigua, pero los primeros pasos hacia el formato SVG tal como lo conocemos hoy se dieron hace más de dos décadas. Impactante, ¿verdad?.

En abril de 1998, Adobe, IBM, Netscape y Sun enviaron una nota al W3C sobre un lenguaje de marcado de gráficos de precisión (PGML) basado en XML. Solo un mes después, en mayo de 1998, HP, Macromedia, Microsoft y Visio también enviaron una nota al W3C sobre un lenguaje de marcado de vectores basado en XML (VML). 

Como resultado de las dos notas, se formó el Grupo de Trabajo SVG del W3C, que publicó oficialmente un conjunto de requisitos en octubre de 1998 y finalizó las especificaciones para SVG 1.0 en 2001. Esta versión se actualizó a SVG 1.1 en 2003 y se editó en 2011. 

Como Amelia Bellamy-Royds, una conocida desarrolladora web y escritora independiente, explicó en un artículo, durante muchos años SVG estuvo en la web, pero no era parte de la web, ya que estaba separada por la necesidad de un enchufe. -en o programa separado. Fue solo en 2011 que las últimas versiones de todos los navegadores principales pudieron admitir SVG como un objeto incrustado o como código en línea. 

SVG 2, basado en SVG 1.1 Second Edition con mejoras en la usabilidad y precisión del lenguaje, fue lanzado y recomendado por W3C en 2018.

Llegando a un punto de inflexión

Podríamos decir fácilmente que el crecimiento de esta tendencia se debe simplemente a los numerosos beneficios de las animaciones SVG en comparación con los GIF, pero en realidad, se debe a algo más. 

Google introdujo por primera vez la velocidad del sitio como factor de clasificación en abril de 2010, pero como también indicaron en el anuncio oficial en su Blog central para webmasters, afectaba a menos del 1% de las consultas de búsqueda en ese momento. Desde que introdujo la velocidad de la página como factor de clasificación, su importancia aumentó cada año. Para 2018, también era uno de los factores de clasificación más importantes para la búsqueda móvil. ¿Qué podría ser más perjudicial para la velocidad de la página que usar formatos de imagen pesados ​​como GIF?. 

En 2015, Google anunció que también utilizaría la compatibilidad con dispositivos móviles como factor de clasificación, por lo que no es de extrañar por qué la capacidad de respuesta de los sitios web se convirtió en un tema candente de inmediato. Además de optimizar los tamaños de fuente, los diseños y la velocidad del sitio, los diseñadores y desarrolladores realmente tuvieron que elegir un formato de imagen que se vería bien en todos los dispositivos y, como todos sabemos ahora, ese es SVG. 

En una época en la que miles de millones de sitios web y empresas luchan en línea por obtener más atención cada día, crear un momento atractivo y acogedor se vuelve aún más esencial. Hoy en día, estos momentos se pueden lograr fácilmente agregando micro interacciones. ¿Por qué es eso tan importante cuando se trata de SVG? Afortunadamente para muchos diseñadores y desarrolladores, el contenido SVG también puede responder a eventos iniciados por el usuario.

Desafortunadamente, no todas las propiedades SVG se pueden animar a través de CSS, y aunque SMIL puede parecer una gran opción, Chrome una vez lo desaprobó, lo que deja incierto el futuro de las animaciones SMIL. JavaScript abrirá la puerta a todas las propiedades SVG y le dará aún más control sobre cómo se desarrolla la animación, pero tiene el costo de escribir un código complicado usted mismo o utilizar una biblioteca de JavaScript como GSAP, Snap.svg, SVG. js o Velocity.js. SpiritApp, Lottie o Keyshape pueden ayudar a los diseñadores a evitar codificar tediosamente las animaciones SVG desde cero, pero algunas de estas soluciones todavía están limitadas solo a macOS o requieren el uso de complementos adicionales, lo que deja a algunos diseñadores interesados ​​en animar SVG sin ninguna solución.

La historia de SVGator

Un día, en 2017, mientras estaban cerca de lanzar un nuevo diseño de sitio web para un servicio completamente diferente, se dieron cuenta de tres cosas. Primero, debían olvidarse por completo de usar PNG y GIF en un sitio web. En segundo lugar, animar SVG es una tarea técnica y que requiere mucho tiempo para la mayoría de los diseñadores. En tercer lugar, pedir a sus desarrolladores front-end que animen SVG o que trabajen con diseñadores en la creación de animaciones no es la forma más eficiente de utilizar nuestros recursos.

De hecho, solo necesitaban una solución rápida que permitiera a sus diseñadores animar SVG sin ninguna habilidad de codificación, utilizando un solo archivo SVG animado que podría agregarse fácilmente a un sitio web. Pensaron que sería increíble tener una herramienta para eso en línea, así que comenzamos a planificar el lanzamiento de un MVP de inmediato.

Ya estaban invertidos de pies a cabeza en la idea cuando publicaron una página de Próximamente para validarla. Pero uno de los mayores estímulos que han recibido llegó cuando más de 10,000 usuarios se suscribieron a su página para obtener acceso anticipado. Según su primera encuesta, el 76% de ellos eran diseñadores.

SVGator se lanzó el 12 de octubre de 2017

A nuestro lanzamiento le siguieron cinco actualizaciones en 2018 y una nueva versión completa en 2019 para incluir animación SVG con JavaScript. SVGator 2.0 viene con una interfaz completamente nueva que permite un mayor control sobre cómo se desarrolla la animación e incluye animadores avanzados, efectos de aceleración personalizados y opciones de exportación interactivas.

Su misión es fomentar el uso extensivo de animaciones SVG en la web. Creen que todos los diseñadores y desarrolladores deben tener una herramienta que les permita concentrarse en lo que mejor saben hacer: crear.