Los gráficos vectoriales ahora se están apoderando de la web e incluso de las aplicaciones móviles. Los íconos, botones y elementos de las páginas web o aplicaciones móviles se están volviendo cada vez más basados ​​en vectores, cayendo mapas de bits debido a la necesidad de renderizarse en todo tipo de resoluciones de pantalla, ppp, proporciones, etc. y debido a la capacidad útil de "acercarse" a leer mejor las páginas en los navegadores móviles hizo que los recursos de los mapas de bits fueran feos e inutilizables.

Es hora de comenzar a crear íconos animados, fondos y controles en SVG, pero ¿cómo animar archivos SVG?

Gran parte de esta respuesta también se publica en esta pregunta relacionada sobre cómo animar ilustraciones para la web.

Evita las animaciones SMIL

Sara Soueidan, probablemente la mejor animadora de SVG en la web, escribió "Sé que escribí la guía de animaciones SMIL pero, al ver su futuro, ya no las uso personalmente". Tú tampoco deberías.

Las animaciones SMIL no funcionan en ningún IE, Edge, algunos navegadores móviles , y Chrome / Opera las está cayendo gradualmente (aunque, más recientemente, el equipo de Chrome dijo que esta desestimación se suspende temporalmente ). Debe evitar usarlos el 99% del tiempo.

Usa CSS para animaciones muy simples

SVG se puede animar en gran medida utilizando CSS puro (incluido el uso de :hoverestados, transforms, transitionsy animations). Está previsto obtener soporte completo de animación CSS, pero actualmente solo algunos son compatibles y pueden tener errores con problemas de navegador cruzado.

Sara Soueidan dice que CSS es excelente para animar SVG, pero prefiere JS porque ayuda a resolver estos problemas entre navegadores. Como tal, úselo cuando pueda pero recurra a JS cuando las animaciones sean más complejas o no funcionen entre navegadores.

Use animaciones de JavaScript si CSS no funciona

La mayoría de las veces, los SVG se pueden animar usando un poco de JavaScript sin la necesidad de una biblioteca de animación de JavaScript. Animar en JS tiene mucho más soporte para navegadores cruzados y es bastante fácil de usar con algunos conocimientos básicos.

Para animaciones complejas que requieren el uso de una línea de tiempo o algo similar, usar una biblioteca como GSAP puede ser muy útil. Hay innumerables otras bibliotecas de animación SVG, Snap.svg es otra gran, pero la mayoría no maneja las animaciones con tanta facilidad o rendimiento como GSAP.

Para tipos particulares de animación, el uso de un complemento JS particular como MorphSVG de GSAP puede ahorrarle bastante tiempo porque se ocupan de los problemas del navegador cruzado y de todos los cálculos. Sin embargo, la mayoría de las animaciones no requieren complementos como este. Consulte "Una guía de alternativas a las funciones SMIL" para obtener más información.

También es aceptable usar polyfills para SMIL, pero estoy cansado de hacerlo porque no son muy utilizados / probados. Dicho esto, Eric Willigers y FakeSmile son los dos más comunes.

Estampación

El único software que he encontrado que exporta a SVG + JS es un complemento de Adobe After Effects llamado Lottie (anteriormente Bodymovin), una extensión de Flash llamada Flash 2 SVG y una pequeña herramienta en línea llamada SVG Circus . Aparte de eso, los animadores de software como Adobe Edge Animate, Adobe Animate CC o Animatron exportan a animaciones SMIL que no deberían usarse. Como tal, es mejor que algún desarrollador haga animaciones SVG + CSS o SVG + JS utilizando SVG exportados desde un editor . Inkscape tiene un gran recurso que vincula tutoriales y ejemplos de cómo hacer esto.

Estoy seguro de que en el futuro más software de animación admitirá la exportación a SVG + JS.

Algunas otras notas importantes

• Es importante tener en cuenta el rendimiento . Sara Drasner creó algunos puntos de referencia de rendimiento para SVG que muestran que debe optar por animaciones CSS aceleradas por hardware siempre que sea posible, pero recurrir a un buen enfoque de JavaScript cuando no sea posible.

• Es mejor usar SVG en una <object>etiqueta o incrustado directamente en un <svg>elemento XML si es interactivo y como imagen de fondo si no es interactivo, pero también hay otras formas de hacerlo .

Para una vista más completa de las animaciones web, lea la publicación de Rachel Nabor en A List Part . Para algunas sugerencias adicionales sobre herramientas, esta publicación es muy útil, aunque no estoy de acuerdo con todos los sentimientos, especialmente con la forma en que presenta animaciones SMIL.

Siempre he encontrado que depender de otra cosa que no sean las bibliotecas JS es un gran problema para el soporte / mantenimiento de WRT.

Siempre he usado D3.js . Fue creado originalmente para crear elementos SVG / DOM interactivos a partir de conjuntos de datos. Sin embargo, puede modificarlo SVG / DOM que se incluye en una página, siempre que JS tenga acceso a él.

Lo he usado en una variedad de proyectos para crear / animar SVG / DOM. Algunos ejemplos incluyen paneles de control en tiempo real, visualizaciones de mapas, transformaciones DOM y crear archivos SVG para incluirlos en archivos PDF. Lo he visto en toda la web también. El sitio web tiene muchos ejemplos y enlaces a páginas que lo han utilizado.

Lo recomiendo porque es bastante compatible con varios navegadores, tiene una comunidad activa y es fácil de aprender. Eche un vistazo a la página web y preste atención a los usos del mundo real para ver una pequeña muestra de lo que puede hacer con ella.

Las siguientes son las formas posibles de animar svg:

SVG ANIMACIONES SONRIENTES

El SVG se puede animar a través de su potente lenguaje de marcado nativo, llamado SMIL, exportado directamente desde herramientas de animación como Adobe Animate CC + flash2svg.

Para animar un SVG con SMIL incluso en navegadores que no son compatibles, solo necesita usar un polyfill SMIL.

Un polyfill es un código de JavaScript especial que brinda soporte para las funciones que faltan en un navegador, traduciendo la codificación original en una que el navegador pueda entender.

El polyfill SMIL realizado por Eric Willigers hace exactamente eso: traduce SMIL en API de animaciones web que incluso el navegador de Microsoft admite. Es tan eficiente que los desarrolladores de Google Chrome decidieron abandonar el soporte SMIL nativo y centrarse en las animaciones web, dejando a Eric Willigers polyfill la tarea de reproducir archivos SMIL en Chrome.

Alguien interpretó erróneamente esto como una depreciación de SMIL por parte de Chrome, y criticó a los desarrolladores por esta elección. Pero no fue una verdadera depreciación, solo una reubicación del trabajo de interpretar SMIL a nivel de polyfill.

De hecho, los propios desarrolladores de Chrome citaron el polyfill de Willigers en el anuncio oficial sobre su intención de desaprobar SMIL.

Entonces, si lees en la web sobre la desaparición de SMIL, no te preocupes. La "muerte" de SMIL fue muy exagerada. Es más como un renacimiento.

Para usar SMIL en todos los navegadores, incluidos IE y EDGE, solo necesita agregar este polyfill de javascript a su página web:

https://github.com/ericwilligers/svg-animation

Aquí hay una página de demostración que utiliza el polyfill hecho por Tom Byrne, el autor del popular exportador flash2svg:

la página sin el polyfill:
http://www.tbyrne.org/staging/smil-polyfill/tears.htm

y la misma página con el polyfill:
http://www.tbyrne.org/staging/smil-polyfill/tears_polyfill.htm

Si nos fijamos en la fuente, se explica por sí misma.

Además, el rendimiento con el polyfill suele ser mejor que el SMIL original, porque en muchos navegadores Web Animations es acelerado por hardware, mientras que SMIL generalmente no lo es.

ANIMACIONES DE EXPORTACIÓN EN SVG SMIL

La forma más sencilla de crear animaciones SVG es utilizar herramientas como Adobe Animate CC para dibujarlas y complementos como Flash2svg ( https://github.com/TomByrne/Flash2Svg ) para exportarlas en SVG. Con él, puede exportar casi todas las animaciones + sonido como un solo archivo SVG, como este episodio de dibujos animados:
http://www.tbyrne.org/portfolio/smil/LoveDota.svg

SVG ANIMATION JS BIBLIOTECAS

La forma javascript es más complicada. En primer lugar, debes ser un programador de JavaScript. Entonces tienes que elegir entre muchas bibliotecas. Los más populares son:

• SnapSVG http://snapsvg.io
  Esta biblioteca es la sucesora de la antigua y popular biblioteca de animación Raphael hecha por el mismo autor. Muy estable, pero convierte SVG en un formato interno en tiempo de ejecución para animarlo. Las opciones de transformación también son muy básicas, solo interpolación lineal. (NOTA: También hay un complemento snap.svg para Adobe Animate CC, pero los archivos exportados están hinchados. El exportador produce un comando snap svg para cada cuadro de la animación, no para cada fotograma clave, produciendo un archivo svg de 18Kb con más de 1000 líneas de código, solo para rotar un rectángulo simple en 360 grados. El complemento Flash2svg es mucho más eficiente, solo un comando y pocos bytes para hacer el mismo trabajo).

• Greensock MorphSVG
  http://greensock.com/morphSVG
  Una biblioteca de morphing con todas las funciones que permite animar SVG fácilmente y sin la necesidad de convertirlos en un formato interno. Simplemente cree fotogramas clave de 3-4 svg en Inkscape y la libra Greenock SVGMorphing se interpolará automáticamente entre los fotogramas y creará todos los fotogramas intermedios para una reproducción fluida. Aquí hay un ejemplo:
  http://codepen.io/Emasoft/pen/reOqYE

• 3D Seen.js
  http://seenjs.io/demo-svg-canvas.html
  Si desea animar en 3D, esta biblioteca es muy poderosa.
  Seen.js procesa mallas de archivos .obj en 3D en SVG y las anima con mucha facilidad.

SVG EDITORES DE IMÁGENES

En cuanto a las herramientas, puede crear los fotogramas clave de animación principalmente con tres software:

• Inkscape: código abierto, tiene muchas características, es un paquete avanzado de edición de vectores hecho por personas que participan en el Grupo de Trabajo SVG. La referencia para el formato SVG. No es fácil de aprender.

• Adobe Illustrator: software comercial de dibujo vectorial muy potente, ofrece muchas características que SVG aún no admite, pero también tiene la peor compatibilidad con el formato. A menudo necesitará editar manualmente el archivo SVG exportado para arreglar el desastre de Illustrator. Pero es muy popular en la escuela de arte, y todos los gráficos saben cómo usarlo.

• Affinity Designer: este es un software comercial como Illustrator, pero con una excelente compatibilidad SVG, casi al nivel de Inkscape. La interfaz de usuario es mucho más amigable, y ahora se está volviendo muy popular entre los artistas SVG.

SVG EDITORES DE ANIMACIÓN

Actualmente el único editor de animación SVG es este:

• Adobe Animate CC: el antiguo Adobe Flash Pro fue reescrito completamente por Adobe para migrar de las animaciones flash ahora obsoletas a las animaciones SVG modernas. Puede exportar las animaciones SVG resultantes junto con una biblioteca javascript personalizada, o elegir guardar en SVG + SMIL usando complementos como "flash2svg". Esta última opción es muy eficiente, siempre la uso en lugar del exportador nativo hinchado.

Puede descargar el complemento gratuito desde aquí: https://github.com/TomByrne/Flash2Svg

O instálelo desde el panel de complementos de Adobe: https://creative.adobe.com/addons/products/7232

Lamentablemente, Adobe Animate CC es comercial. Hay aplicaciones de animación alternativas de código abierto gratuitas, pero las probé todas y todavía apestan en mi humilde opinión. Esperemos por el futuro.

Referencias:
Mi publicación de blog más exhaustiva sobre el tema: https://medium.com/@fmuaddib/the-following-are-the-possible-ways-to-create-professional-animations-in-svg-9d4caca5f4ec

El caso hace referencia a snap.svg: /programming/35727635/adobe-animate-snap-svg-plugin-huge-files