Agora, os gráficos vetoriais estão dominando a web e até os aplicativos móveis. Ícones, botões e elementos de páginas da Web ou aplicativos móveis estão se tornando cada vez mais baseados em vetores, descartando bitmaps devido à necessidade de renderização em todos os tipos de resoluções de tela, dpi, proporções etc. e à capacidade útil de "ampliar" as páginas de melhor leitura nos navegadores móveis tornaram os ativos de bitmaps mais feios e inutilizáveis.

Então é hora de começar a criar ícones, planos de fundo e controles animados em SVG, mas como você anima arquivos SVG?

Muitas dessas respostas também estão publicadas nesta pergunta relacionada sobre como animar ilustrações para a web.

Evite animações SMIL

Sara Soueidan, provavelmente a melhor animadora de SVGs da web, escreveu "Eu sei que escrevi o guia para animações SMIL, mas, vendo o futuro delas, não as uso mais pessoalmente". Você também não deveria.

As animações SMIL não funcionam em nenhum navegador IE, Edge, em alguns navegadores móveis e estão sendo gradualmente descartadas pelo Chrome / Opera (embora, mais recentemente, a equipe do Chrome tenha dito que essa depreciação está temporariamente suspensa ). Você deve evitar usá-los 99% do tempo.

Use CSS para animações muito simples

SVG pode ser largamente animados usando CSS puro (incluindo o uso de :hoverestados, transforms, transitions e animations). Está planejado para obter suporte completo à animação CSS, mas atualmente apenas alguns são suportados e podem ser problemáticos com problemas entre navegadores.

Sara Soueidan diz que o CSS é ótimo para animar SVGs, mas prefere o JS porque ajuda a resolver esses problemas entre navegadores. Como tal, use-o quando puder, mas retorne ao JS quando as animações forem mais complexas ou não funcionarem no navegador.

Use animações JavaScript se o CSS não funcionar

Na maioria das vezes, os SVGs podem ser animados usando um pouco de JavaScript, sem a necessidade de uma biblioteca de animação JavaScript. A animação em JS tem muito mais suporte a vários navegadores e é bastante fácil de usar, com algum entendimento básico.

Para animações complexas que exigem o uso de uma linha do tempo ou algo semelhante, o uso de uma biblioteca como o GSAP pode ser muito útil. Existem inúmeras outras bibliotecas de animação SVG, o Snap.svg é outra grande, mas a maioria não lida com animações tão facilmente ou com o mesmo desempenho que o GSAP.

Para tipos específicos de animação, o uso de um plugin JS específico, como o MorphSVG do GSAP, pode economizar um pouco de tempo, porque eles cuidam dos problemas entre navegadores e de todos os cálculos. No entanto, a maioria das animações não requer plugins como este. Consulte "Um guia de alternativas aos recursos SMIL" para obter mais informações.

Também é aceitável usar polyfills para SMIL, mas estou cansado de fazê-lo porque eles não são muito usados ​​/ testados. Com isso dito, Eric Willigers e FakeSmile são os dois mais comuns.

Ferramentas

O único software que encontrei que exporta para SVG + JS é um plug-in do Adobe After Effects chamado Lottie (anteriormente Bodymovin), uma extensão do Flash chamada Flash 2 SVG e uma pequena ferramenta online chamada SVG Circus . Fora isso, os animadores de software como o Adobe Edge Animate, o Adobe Animate CC ou o Animatron exportam para animações SMIL que não devem ser usadas. Como tal, é melhor que algum desenvolvedor faça animações SVG + CSS ou SVG + JS usando SVGs exportados de um editor . O Inkscape possui um ótimo recurso para vincular tutoriais e exemplos de como fazer isso.

Tenho certeza de que, no futuro, mais software de animação suportará a exportação para SVG + JS.

Algumas outras notas importantes

• É importante ter em mente o desempenho . Sara Drasner criou alguns benchmarks de desempenho para o SVG, que mostram que você deve optar por animações CSS aceleradas por hardware sempre que possível, mas recorrer a uma boa abordagem JavaScript quando não for possível.

• É melhor usar SVGs em uma <object>tag ou incorporado diretamente em um <svg>elemento XML, se for interativo e como imagem de fundo, se não for interativo, mas também há outras maneiras de fazê-lo .

Para uma visão mais completa das animações na Web, leia a publicação de Rachel Nabor na seção A List . Para algumas sugestões adicionais sobre ferramentas, este post é muito útil, embora eu não concorde com todos os sentimentos, especialmente com a forma como ele apresenta animações SMIL.

Eu sempre achei que confiar em algo além das bibliotecas JS é uma enorme dor no suporte / manutenção do WRT.

Eu sempre usei D3.js . Foi originalmente criado para criar elementos SVG / DOM interativos a partir de conjuntos de dados. No entanto, você pode modificar o SVG / DOM incluído em uma página, desde que JS tenha acesso a ela.

Eu usei em uma variedade de projetos para criar / animar SVG / DOM. alguns exemplos incluem painéis dinâmicos em tempo real, visualizações de mapas, transformações de DOM e criar arquivos SVG para inclusão em PDFs. Eu já vi isso em toda a web também. O site tem vários exemplos e links para páginas que o utilizaram.

Eu o recomendo porque é compatível com vários navegadores, tem uma comunidade ativa e é fácil de aprender. Dê uma olhada na página da Web e preste atenção ao mundo real para ver uma pequena amostra do que você pode fazer com ela.

A seguir estão as maneiras possíveis de animar svg:

ANIMAÇÕES SVG SMIL

O SVG pode ser animado por meio de sua poderosa linguagem de marcação nativa, chamada SMIL, exportada diretamente de ferramentas de animação como o plugin Adobe Animate CC + flash2svg.

Para animar um SVG com SMIL, mesmo em navegadores sem suporte, basta usar um polyfill SMIL.

Um polyfill é um trecho de código javascript especial que fornece suporte para os recursos ausentes de um navegador, traduzindo a codificação original em uma que o navegador possa entender.

O polyfill SMIL feito por Eric Willigers faz exatamente isso: ele converte o SMIL em API de animações da Web que até o navegador da Microsoft suporta. É tão eficiente que os desenvolvedores do Google Chrome decidiram abandonar o suporte nativo ao SMIL e se concentrar nas animações da Web, deixando para o polyfill Eric Willigers a tarefa de reproduzir arquivos SMIL no Chrome.

Alguém interpretou erroneamente isso como uma depreciação do SMIL pelo Chrome e criticou os desenvolvedores por essa escolha. Mas não foi uma verdadeira depreciação, apenas uma realocação do trabalho de interpretar o SMIL em um nível de polyfill.

De fato, os próprios desenvolvedores do Chrome citaram o polyfill do Willigers no anúncio oficial sobre sua intenção de depreciar o SMIL.

Portanto, se você ler na web sobre o desaparecimento do SMIL, não se preocupe. A "morte" do SMIL foi muito exagerada. É mais como um renascimento.

Para usar o SMIL em todos os navegadores, incluindo IE e EDGE, você só precisa adicionar este polyfill javascript à sua página da web:

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

Aqui está uma página de demonstração usando o polyfill feito por Tom Byrne, autor do popular exportador flash2svg:

a página sem o polyfill:
http://www.tbyrne.org/staging/smil-polyfill/tears.htm

e a mesma página com o polyfill:
http://www.tbyrne.org/staging/smil-polyfill/tears_polyfill.htm

Se você olhar para a fonte, é praticamente auto-explicativo.

Além disso, as performances com o polyfill geralmente são melhores que o SMIL original, porque em muitos navegadores o Web Animations é acelerado por hardware, enquanto o SMIL geralmente não é.

ANIMAÇÕES DE EXPORTAÇÃO EM SVG SMIL

A maneira mais simples de criar animações SVG é usar ferramentas como o Adobe Animate CC para desenhá-las e plug-ins como o Flash2svg ( https://github.com/TomByrne/Flash2Svg ) para exportá-las no SVG. Com ele, você pode exportar quase todas as animações + som como um único arquivo SVG, como este episódio de desenho animado:
http://www.tbyrne.org/portfolio/smil/LoveDota.svg

ANIMAÇÃO SVG JS BIBLIOTECAS

A maneira javascript é mais complicada. Primeiro de tudo você precisa ser um programador de javascript. Então você tem que escolher entre muitas bibliotecas. Os mais populares são:

• SnapSVG http://snapsvg.io
  Esta biblioteca é a sucessora da antiga e popular biblioteca de animação Raphael, criada pelo mesmo autor. Muito estável, mas converte SVG em um formato interno em tempo de execução para animá-lo. As opções de transformação também são muito básicas, apenas interpolação linear. (OBSERVAÇÃO: Também há um plug-in snap.svg para o Adobe Animate CC, mas os arquivos exportados estão inchados. O exportador produz um comando snap svg para cada quadro da animação, não para cada quadro-chave, produzindo um arquivo svg de 18 KB com mais de 1000 linhas de código, apenas para girar um retângulo simples em 360 graus. O plugin Flash2svg é muito mais eficiente, apenas um comando e poucos bytes para fazer o mesmo trabalho).

• Greensock MorphSVG
  http://greensock.com/morphSVG
  Uma biblioteca de morphing com todos os recursos que permite animar facilmente o SVG e sem a necessidade de convertê-los em um formato interno. Basta criar 3-4 quadros-chave svg no Inkscape e a biblioteca Greenock SVGMorphing interpola automaticamente entre os quadros e cria todos os quadros intermediários para uma reprodução suave. Aqui está um exemplo:
  http://codepen.io/Emasoft/pen/reOqYE

• 3D Seen.js
  http://seenjs.io/demo-svg-canvas.html
  Se você deseja animar em 3D, esta biblioteca é muito poderosa.
  O Seen.js renderiza arquivos .obj 3D em malhas no SVG e os anima com muita facilidade.

EDITORES DE IMAGENS SVG

Quanto às ferramentas, você pode criar os quadros-chave de animação principalmente com três softwares:

• Inkscape: código aberto, possui muitos recursos, é um pacote avançado de edição de vetor feito por pessoas que participam do SVG Working Group. A referência para o formato SVG. Não é fácil de aprender.

• Adobe Illustrator: software comercial de desenho vetorial muito poderoso, oferece muitos recursos ainda não suportados pelo SVG, mas também possui a pior compatibilidade com o formato. Você precisará editar manualmente o arquivo SVG exportado para corrigir a bagunça do ilustrador. Mas é muito popular na escola de arte, e todos os gráficos sabem como usá-lo.

• Affinity Designer: este é um software comercial como o Illustrator, mas com uma excelente compatibilidade SVG, quase no nível do Inkscape. A interface do usuário é muito mais amigável e agora está se tornando muito popular entre os artistas SVG.

EDITORES DE ANIMAÇÃO SVG

Atualmente, o único editor de animação SVG é este:

• Adobe Animate CC: o antigo Adobe Flash Pro foi totalmente reescrito pela Adobe para migrar das animações em flash agora obsoletas para as modernas animações SVG. Você pode exportar as animações SVG resultantes juntamente com uma biblioteca javascript personalizada ou optar por salvar no SVG + SMIL usando plug-ins como "flash2svg". Esta última opção é muito eficiente, eu sempre a uso em vez do exportador nativo inchado.

Você pode baixar o plugin gratuito aqui: https://github.com/TomByrne/Flash2Svg

Ou instale-o no painel Adobe Plugins: https://creative.adobe.com/addons/products/7232

Infelizmente, o Adobe Animate CC é comercial. Existem aplicativos alternativos gratuitos de animação de código aberto, mas eu tentei todos eles e eles ainda sugam o IMHO. Vamos torcer para o futuro.

Referências:
Meu post mais exaustivo no blog sobre o assunto: https://medium.com/@fmuaddib/the-following-are-the-possible-ways-to-create-professional-animations-in-svg-9d4caca5f4ec

O caso referido no snap.svg: /programming/35727635/adobe-animate-snap-svg-plugin-huge-files