JavaScript é a última das maneiras que abordaremos na animação de SVG. Vimos CSS, que é excelente e muito confortável, mas não pode fazer várias propriedades SVG que você pode querer animar. Em seguida, vimos SMIL, que é uma sintaxe declarativa no próprio código SVG, que é mais poderosa porque pode animar mais coisas, incluindo a forma do próprio elemento.
JavaScript pode fazer tudo o que qualquer um deles pode fazer, e bem. Só tem o custo de escrever um código realmente complicado você mesmo ou a sobrecarga de uma biblioteca para ajudá-lo. Mas, uma vez que você está pronto para usar, a sintaxe pode ser realmente maravilhosa e amigável para animações e o desempenho pode ser de primeira qualidade.
Outra vantagem de usar JavaScript para animações SVG é o suporte. Existem muitas peculiaridades para se preocupar ao animar o SVG. Alguns navegadores não oferecem suporte a transformações em elementos. Alguns navegadores fazem coisas estranhas com o zoom da página. Alguns são inconsistentes com a origem da transformação. Bibliotecas JavaScript geralmente ajudam com esses problemas.
Embora estejamos falando sobre animação especificamente, muitas bibliotecas SVG JavaScript são sobre como trabalhar com SVG em geral. Eles podem criar e manipular, acessar propriedades do elemento, alterá-las, etc. É como adicionar uma API mais robusta ao SVG.
Snag.svg - “jQuery para SVG”
Exemplo básico de uso de Snap.svg:
Veja a Pen BhHix de Chris Coyier (@chriscoyier) no CodePen.
Outra coisa que fizemos neste vídeo com Snap.svg é converter esta caneta de animação CSS para Snap.svg, nos ensinando que podemos usar Snap.svg para trabalhar com SVG embutido já na página. A própria Adobe coletou vários exemplos.
Raphael - biblioteca mais antiga do mesmo criador do Snap.svg
SVG.js - “Uma biblioteca leve para manipulação e animação de SVG.” Aqui está a demonstração do relógio que vimos, mostrando como essas animações funcionam ao manipular rapidamente o DOM.
D3.js - “D3.js é uma biblioteca JavaScript para manipulação de documentos com base em dados. O D3 ajuda você a dar vida aos dados usando HTML, SVG e CSS. ” Aqui está um tutorial sobre como começar a criar SVG com ele e outra introdução à animação com ele.
GreenSock - “Animação de nível profissional de altíssimo desempenho para a web moderna.” GreenSock trata de animações na web em geral, mas oferece suporte a SVG. Aqui está uma caneta onde você pode ver como funciona.
Velocity.js - “Animação JavaScript acelerada.” Também uma biblioteca sobre animação na web em geral, que passa a suportar SVG. Julian Shapiro o criou e escreveu sobre por que a animação JavaScript pode realmente ser o estilo de animação com melhor desempenho e também como o Velocity.js funciona. Aqui está uma demonstração muito simples animando algumas propriedades específicas de SVG.
Você também está livre para fazer por conta própria com animações JavaScript sem a ajuda de uma estrutura. Lembre-se de que o SVG embutido está no DOM, portanto, todo o material da API DOM regular está disponível para você. Assim como você, não precisa realmente do jQuery para trabalhar com o DOM, apenas torna isso mais fácil. Aqui está um exemplo que faz as coisas à sua maneira que é muito interessante.