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