La grafica vettoriale ora sta conquistando il Web e persino le applicazioni mobili. Icone, pulsanti ed elementi di pagine Web o app mobili stanno diventando sempre più basati su vettori, facendo cadere bitmap a causa della necessità di renderizzare su tutti i tipi di risoluzioni dello schermo, dpi, rapporti, ecc. E perché l'utile capacità di "zoomare" su leggere meglio le pagine sui browser mobili ha reso le risorse bitmap più brutte e inutilizzabili.

Quindi è il momento di iniziare a creare icone animate, sfondi e controlli in SVG ma come si animano i file SVG?

Gran parte di questa risposta è pubblicata anche in questa domanda correlata su come animare illustrazioni per il web.

Evita le animazioni SMIL

Sara Soueidan, probabilmente la migliore animatrice di SVG sul web, ha scritto "So di aver scritto la guida alle animazioni SMIL ma, visto il loro futuro, non le uso più personalmente". Non dovresti neanche tu.

Le animazioni SMIL non funzionano in nessun browser Internet Explorer, Edge, alcuni browser mobili e vengono gradualmente eliminate da Chrome / Opera (anche se, più recentemente, il team di Chrome ha dichiarato che questa deprecazione è temporaneamente sospesa ). Dovresti evitare di usarli il 99% delle volte.

Usa CSS per animazioni molto semplici

L'SVG può essere in gran parte animato usando CSS puro (incluso usando :hoverstati, transforms, transitions e animations). Si prevede di ottenere il pieno supporto dell'animazione CSS, ma attualmente solo alcuni sono supportati e possono essere corretti con problemi tra browser.

Sara Soueidan afferma che CSS è ottimo per l'animazione di SVG ma preferisce JS perché aiuta a risolvere questi problemi tra browser. Come tale, usalo quando puoi ma puoi ricorrere a JS quando le animazioni sono più complesse o non funzionano su più browser.

Usa le animazioni JavaScript se CSS non funzionerà

La maggior parte delle volte, gli SVG possono essere animati usando un po 'di JavaScript senza la necessità di una libreria di animazioni JavaScript. L'animazione in JS ha molto più supporto tra browser ed è abbastanza facile da usare con una comprensione di base.

Per animazioni complesse che richiedono l'uso di una sequenza temporale o qualcosa di simile, l'utilizzo di una libreria come GSAP può essere molto utile. Esistono innumerevoli altre librerie di animazione SVG, Snap.svg è un'altra grande, ma la maggior parte non gestisce le animazioni con la stessa facilità o prestazioni di GSAP.

Per particolari tipi di animazione, l'utilizzo di un particolare plug-in JS come MorphSVG di GSAP può farti risparmiare un bel po 'di tempo perché si occupano dei problemi del browser incrociato e di tutti i calcoli. Tuttavia, la maggior parte delle animazioni non richiede plugin come questo. Vedere "Una guida alle alternative alle funzionalità SMIL" per ulteriori informazioni.

È anche accettabile usare polifilloli per SMIL, ma sono stanco di farlo perché non sono molto usati / testati. Detto questo, Eric Willigers e FakeSmile sono i due più comuni.

Tooling

L'unico software che ho trovato che esporta in SVG + JS sono un plug-in Adobe After Effects chiamato Lottie (precedentemente Bodymovin), un'estensione Flash chiamata Flash 2 SVG e un piccolo strumento online chiamato SVG Circus . Oltre a ciò, animatori software come Adobe Edge Animate, Adobe Animate CC o Animatron esportano in animazioni SMIL che non dovrebbero essere utilizzate. Pertanto, è meglio che alcuni sviluppatori realizzino animazioni SVG + CSS o SVG + JS utilizzando SVG esportati da un editor . Inkscape ha una grande risorsa che collega esercitazioni ed esempi su come farlo.

Sono sicuro che in futuro altri software di animazione supporteranno l'esportazione in SVG + JS.

Alcune altre note importanti

• È importante tenere presente le prestazioni . Sara Drasner ha creato alcuni benchmark delle prestazioni per SVG che mostrano che dovresti optare per animazioni CSS con accelerazione hardware quando possibile, ma fallback su un buon approccio JavaScript quando non è possibile.

• È meglio usare SVG in un <object>tag o incorporato direttamente in un <svg>elemento XML se è interattivo e come immagine di sfondo se non è interattivo, ma ci sono anche altri modi per farlo .

Per una visione più completa delle animazioni web, leggi il post di Rachel Nabor su A List Part . Per alcuni suggerimenti aggiuntivi sugli strumenti, questo post è molto utile, anche se non sono d'accordo con tutti i sentimenti, in particolare con come presenta le animazioni SMIL.

Ho sempre trovato fare affidamento su qualcosa di diverso dalle librerie JS per essere un enorme supporto / manutenzione WRT.

Ho sempre usato d3.js . È stato originariamente creato per creare elementi SVG / DOM interattivi da set di dati. Tuttavia, puoi farlo per modificare SVG / DOM incluso in una pagina, purché JS abbia accesso ad esso.

Ho usato in una varietà di progetti per creare / animare SVG / DOM. alcuni esempi includono dashboard soft in tempo reale, visualizzazioni di mappe, trasformazioni DOM e creazione di file SVG da includere nei PDF. L'ho visto anche su tutto il web. Il sito Web ha una serie di esempi e collegamenti a pagine che lo hanno utilizzato.

Lo consiglio perché è abbastanza compatibile con più browser, ha una comunità attiva ed è facile da imparare. Dai un'occhiata alla pagina web e presta attenzione agli usi del mondo reale per vedere un piccolo esempio di cosa puoi farci.

I seguenti sono i modi possibili per animare svg:

ANIMAZIONI SORRIDENTI DI SVG

L'SVG può essere animato tramite il suo potente linguaggio di markup nativo, chiamato SMIL, esportato direttamente da strumenti di animazione come Adobe Animate CC + plug-in flash2svg.

Per animare un SVG con SMIL anche su browser privi di supporto, è sufficiente utilizzare un polyfill SMIL.

Un polyfill è uno speciale codice javascript che fornisce supporto per le funzioni mancanti da un browser, traducendo la codifica originale in una che il browser può comprendere.

Il polyfill SMIL realizzato da Eric Willigers fa proprio questo: traduce SMIL in API di animazioni Web supportate anche dal browser Microsoft. È così efficiente che gli sviluppatori di Google Chrome hanno deciso di abbandonare il supporto SMIL nativo e concentrarsi sulle animazioni Web, lasciando a Eric Willigers il compito di eseguire il compito di riprodurre file SMIL in Chrome.

Qualcuno ha erroneamente interpretato ciò come una deprecazione di SMIL da parte di Chrome e ha criticato gli sviluppatori per questa scelta. Ma non è stata una vera deprecazione, solo una delocalizzazione del lavoro di interpretazione di SMIL a livello di polyfill.

In effetti gli stessi sviluppatori di Chrome hanno citato la polifill Willigers nell'annuncio molto ufficiale dell'intenzione di deprecare SMIL.

Quindi, se leggi sul web la scomparsa di SMIL, non preoccuparti. La "morte" di SMIL è stata fortemente esagerata. È più come una rinascita.

Per usare SMIL su tutti i browser, inclusi IE ed EDGE, devi solo aggiungere questo polyfill javascript alla tua pagina web:

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

Ecco una pagina demo che utilizza il polyfill realizzato da Tom Byrne, l'autore del famoso esportatore flash2svg:

la pagina senza il polyfill:
http://www.tbyrne.org/staging/smil-polyfill/tears.htm

e la stessa pagina con il polyfill:
http://www.tbyrne.org/staging/smil-polyfill/tears_polyfill.htm

Se guardi la fonte è praticamente autoesplicativa.

Anche le prestazioni con il polyfill sono spesso migliori dell'originale SMIL, perché su molti browser le animazioni Web sono accelerate dall'hardware, mentre SMIL di solito non lo è.

ANIMAZIONI DI ESPORTAZIONE IN SVG SMIL

Il modo più semplice per creare animazioni SVG è utilizzare strumenti come Adobe Animate CC per disegnarli e plugin come Flash2svg ( https://github.com/TomByrne/Flash2Svg ) per esportarli in SVG. Con esso puoi esportare quasi tutte le animazioni + il suono come un singolo file SVG, come in questo episodio di cartoni animati:
http://www.tbyrne.org/portfolio/smil/LoveDota.svg

LIBRERIA JS DI ANIMAZIONE SVG

Il modo javascript è più complicato. Prima di tutto devi essere un programmatore javascript. Quindi devi scegliere tra molte librerie. I più popolari sono:

• SnapSVG http://snapsvg.io
  Questa libreria è il successore della vecchia e popolare libreria di animazioni Raphael realizzata dallo stesso autore. Molto stabile, ma converte SVG in un formato interno durante l'esecuzione per animarlo. Le opzioni di morphing sono anche molto semplici, solo interpolazione lineare. (NOTA: esiste anche un plug-in snap.svg per Adobe Animate CC, ma i file esportati sono gonfiati. L'esportatore produce un comando snap svg per ogni fotogramma dell'animazione, non tutti i fotogrammi chiave, producendo un file svg 18 KB con oltre 1000 righe di codice, solo per ruotare un semplice rettangolo di 360 gradi. Il plugin Flash2svg è molto più efficiente, solo un comando e pochi byte per fare lo stesso lavoro).

• Greensock MorphSVG
  http://greensock.com/morphSVG
  Una libreria di morphing con funzionalità complete che consente di animare facilmente SVG e senza la necessità di convertirle in un formato interno. Basta creare 3-4 fotogrammi chiave in formato svg in Inkscape e la libreria Greenock SVGMorphing interpolerà automaticamente tra i fotogrammi e creerà tutti i fotogrammi intermedi per una riproduzione fluida. Ecco un esempio:
  http://codepen.io/Emasoft/pen/reOqYE

• 3D Seen.js
  http://seenjs.io/demo-svg-canvas.html
  Se vuoi animare in 3D questa libreria è molto potente.
  Seen.js esegue il rendering delle mesh di file .obj 3D in SVG e le anima molto facilmente.

EDITORI DI IMMAGINI SVG

Per quanto riguarda gli strumenti, è possibile creare i fotogrammi chiave di animazione principalmente con tre software:

• Inkscape: open source, ha tantissime funzionalità, è un pacchetto di editing vettoriale avanzato realizzato da persone che partecipano al gruppo di lavoro SVG. Il riferimento per il formato SVG. Non facile da imparare.

• Adobe Illustrator: software commerciale di disegno vettoriale molto potente, offre molte funzionalità non ancora supportate da SVG, ma ha anche la peggiore compatibilità con il formato. Sarà spesso necessario modificare manualmente il file SVG esportato per correggere il disordine di Illustrator. Ma è molto popolare nella scuola d'arte e tutti i grafici sanno come usarlo.

• Affinity Designer: questo è un software commerciale come Illustrator, ma con un'eccellente compatibilità SVG, quasi a livello di Inkscape. L'interfaccia utente è molto più intuitiva e sta diventando molto popolare tra gli artisti SVG.

EDITORI DI ANIMAZIONE SVG

Attualmente l'unico editor di animazioni SVG è questo:

• Adobe Animate CC: l'ex Adobe Flash Pro è stato completamente riscritto da Adobe per migrare dalle ormai obsolete animazioni flash alle moderne animazioni SVG. Puoi esportare le animazioni SVG risultanti insieme a una libreria javascript personalizzata o scegliere di salvare in SVG + SMIL usando plugin come "flash2svg". Quest'ultima opzione è molto efficiente, la uso sempre al posto dell'esportatore nativo gonfio.

Puoi scaricare il plug-in gratuito da qui: https://github.com/TomByrne/Flash2Svg

Oppure installalo dal pannello Plugin Adobe: https://creative.adobe.com/addons/products/7232

Purtroppo Adobe Animate CC è commerciale. Esistono applicazioni di animazione alternative open source gratuite, ma le ho provate tutte e continuano a succhiare IMHO. Speriamo per il futuro.

Riferimenti: il
mio post più esauriente sul blog sull'argomento: https://medium.com/@fmuaddib/the-following-are-the-possible-ways-to-create-professional-animations-in-svg-9d4caca5f4ec

Il caso di riferimento su snap.svg: /programming/35727635/adobe-animate-snap-svg-plugin-huge-files