Animare SVG con CSS e SMIL

Gli attributi di presentazione SVG (fill, stroke, opacity, transform) possono essere animati con le transizioni CSS. Aggiungete una classe e definite la transizione: .icon { transition: fill 200ms ease; } .icon:hover { fill: red; }. Le transizioni CSS funzionano allo stesso modo sugli elementi SVG.

Applicate @keyframes agli elementi SVG: animate stroke-dashoffset per creare effetti di disegno dei path, opacity per la comparsa graduale, transform per movimento e rotazione. La stessa sintassi di animazione utilizzata per gli elementi HTML si applica agli elementi SVG senza modifiche.

La tecnica stroke-dasharray e stroke-dashoffset simula il disegno di un path: impostate dasharray uguale alla lunghezza del path e dashoffset uguale alla lunghezza del path, così il path risulta invisibile; quindi animate dashoffset fino a 0. Il tratto sembra disegnarsi da solo dall'inizio alla fine.

path.getTotalLength() restituisce la lunghezza del path nelle unità utente SVG. Utilizzate questo valore sia per stroke-dasharray sia per il valore iniziale di stroke-dashoffset. In questo modo l'animazione funziona correttamente indipendentemente dalla complessità o dalla lunghezza del path.

I browser moderni supportano transform CSS sugli elementi SVG. Negli elementi SVG, transform-origin è impostato per impostazione predefinita sull'angolo superiore sinistro dell'SVG, non al centro dell'elemento come in HTML. Specificate transform-box: fill-box per rendere transform-origin relativo al riquadro di delimitazione dell'elemento.

SMIL (Synchronized Multimedia Integration Language) è il sistema di animazione integrato di SVG. L'elemento animate modifica i valori degli attributi nel tempo. SMIL non richiede JavaScript né CSS: le animazioni sono completamente dichiarative all'interno del markup SVG.

<animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="2s" repeatCount="indefinite"> ruota un elemento attorno a un punto centrale specificato usando la sintassi SMIL.

<animateMotion> sposta un elemento lungo un path SVG. Fate riferimento a un path con mpath oppure inserite i dati del path direttamente. L'elemento segue automaticamente la curva del path: è utile per percorsi di movimento complessi senza dover calcolare manualmente le coordinate.

Animazioni CSS: supportate da tutti i browser moderni, integrate con la cascata CSS e più facili da controllare tramite JavaScript (mettere in pausa, invertire). SMIL: contenuto autonomo nel markup SVG, funziona nei file SVG statici senza accesso al CSS, ed è dichiarativo ed espressivo per le animazioni che seguono un path.

Animate tra due forme di path: i path devono avere lo stesso numero di comandi e una struttura compatibile. L'animazione CSS anima la proprietà d (Chrome 88+, Firefox 72+): @keyframes { to { d: path("M...") } } per il morphing nativo dei path tramite CSS.

Aggiungete la media query prefers-reduced-motion per disabilitare o semplificare le animazioni SVG per gli utenti a cui il movimento provoca disagio. Le animazioni decorative devono essere completamente disabilitate; quelle significative, come gli stati di caricamento, devono essere semplificate anziché interrotte.

L'animazione SVG utilizza transizioni CSS e keyframe per effetti basati sulle proprietà, la tecnica stroke-dasharray/dashoffset per il disegno dei path, animate/animateTransform/animateMotion di SMIL per animazioni dichiarative all'interno di SVG e prefers-reduced-motion per l'accessibilità. CSS e SMIL sono complementari: scegliete in base alla necessità di integrare la cascata CSS o di mantenere portatile un file autonomo.