Animación SVG Con Imágenes Vectoriales | Symbio Creativo

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

by | Dec 26, 2020 | Emprendimiento | 0 comments

grafico personaje en svg para blog
79 / 100

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.

post animacion con svg 3

¿Cómo es eso posible?

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.

post animacion con svg 2

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.

post animacion con svg 1
Para todos los que quieren profundizar más allá pueden ir y visitar el artículo completo escrito por  Csenge Miklos

Siguéme en las Redes

Anímate a suscribirse, para que estemos sincronizados con el contenido.

La Importancia de un Diseño Web Accesible

La Importancia de un Diseño Web Accesible y Cómo Implementarlo en tu SitioCuando hablamos de sitios web, a menudo nos centramos en los aspectos más llamativos, como el diseño visual y las funcionalidades avanzadas. Pero, ¿alguna vez has pensado en la accesibilidad de...

Tips para optimizar la velocidad de carga de tu sitio web y mejorar la experiencia del usuario

Optimizar la Velocidad de Carga de tu Sitio Web: Claves para Mejorar la Experiencia del UsuarioSi bien es cierto que el diseño y el contenido de un sitio web son fundamentales para atraer y mantener a los visitantes, también lo es la velocidad de carga. Un sitio que...

Las Mejores Herramientas de Análisis de SEO para Optimizar tu Sitio Web

Las Mejores Herramientas de Análisis de SEO para Optimizar tu Sitio WebHoy, nos encontramos en un mundo digital cada vez más competitivo. Las marcas y empresas que desean destacar en los motores de búsqueda deben utilizar eficazmente las herramientas de análisis de...

Cómo Utilizar el Análisis de la Competencia para Mejorar Tu Estrategia de SEO

Cómo Utilizar el Análisis de la Competencia para Mejorar Tu Estrategia de SEOAnálisis de la Competencia como Herramienta SEO ¿Sabías que tu competencia puede ser una de tus mejores aliadas para mejorar tu estrategia de SEO? No, no es un error tipográfico, ni tampoco...

Cómo crear una estrategia de contenido efectiva para potenciar tu marca en línea

Cómo crear una estrategia de contenido efectiva para potenciar tu marca en líneaEn la era digital actual, destacar en el abarrotado mundo en línea se ha convertido en una tarea cada vez más difícil. Cada día, se publican miles de millones de piezas de contenido en...

10 Consejos de SEO para Mejorar el Posicionamiento de tu Sitio Web en Google

10 Consejos de SEO para Mejorar el Posicionamiento de tu Sitio Web en GoogleCuando se trata de paisajismo, la competencia en línea puede ser feroz. ¿Cómo puedes asegurarte de que tu sitio web sea el primero que los usuarios encuentren cuando buscan inspiración o...

Los beneficios del storytelling en el marketing de contenidos y cómo aplicarlo en tu negocio

Los beneficios del storytelling en el marketing¿Qué es el storytelling y por qué es importante en el marketing de contenidos?El storytelling es el arte de contar historias. ¿Sabías que las historias son una herramienta muy poderosa en el mundo del marketing? Sí, así...

Fotografía profesional: Cómo elegir el estilo adecuado para tu marca

Fotografía profesional: Cómo elegir el estilo adecuado para tu marca¿Alguna vez te has preguntado cómo elegir el estilo de fotografía profesional perfecto para tu marca? ¡No busques más! En este artículo te revelaremos la clave para encontrar el estilo fotográfico que...

Diseño web responsivo: Por qué es fundamental para el éxito de tu negocio en línea

Diseño web responsivo: Por qué es fundamental para el éxito de tu negocio en línea¿Alguna vez te has preguntado cómo algunos sitios web logran atraer a tantos visitantes y mantenerlos navegando en sus páginas? El secreto está en el diseño web responsivo. Pero, ¿qué es...

Inbound marketing Cómo atraer, convertir y fidelizar clientes de manera eficiente

Inbound marketing: Cómo atraer, convertir y fidelizar clientes de manera eficiente, Aprende a utilizar el Inbound marketing para atraer, convertir y fidelizar clientes. Aprende a utilizar el Inbound marketing para atraer, convertir y fidelizar clientes¿Quieres mejorar...