Come creare animazioni SVG con i CSS

L'animazione Web è di gran moda in questi giorni e non c'è limite a ciò che puoi progettare con SVG. Se sei pronto a provarlo sul tuo sito, conoscere i concetti di animazione di base ti aiuterà a creare progetti più complessi. Gli SVG sono ottimi per l'animazione sul Web perché sono scalabili e indipendenti dalla risoluzione (il che significa che possono essere ridimensionati senza perdere qualità), a differenza dei file JPEG e PNG. Sono anche facili da definire perché puoi utilizzare CSS, filtri e interattività per migliorare gli SVG.

Prima di immergerci nel tutorial, dovresti avere familiarità con le transizioni e le trasformazioni CSS. Alcuni degli stessi concetti verranno utilizzati con gli SVG.

Nozioni di base SVG

SVG, o Scalable Vector Graphics, utilizza un formato di testo basato su XML per descrivere come dovrebbe apparire l'immagine. Gli SVG sono file di testo con un mucchio di XML all'interno. Se ne apri uno con un editor di codice, vedrai cosa intendiamo. Il motivo per cui gli SVG possono essere ridimensionati a dimensioni diverse senza perdere qualità è perché il testo viene utilizzato per descrivere la grafica.

Le informazioni visive in un file SVG vengono calcolate e visualizzate dal browser o da qualsiasi software di grafica utilizzato per modificarle. Non sono complessi come un JPG o altri formati di file immagine, il che consente loro di essere progettati e modificati manualmente in un editor di testo, se scegli di farlo. Possono essere modificati e stilizzati con i CSS, rendendoli fantastici con cui progettare sul web.

Il supporto del browser per la grafica SVG è piuttosto universale; IE8 potrebbe dare alcuni problemi, ma i browser moderni gestiscono meravigliosamente gli SVG. Potrebbero esserci bug minori qua e là, ma in genere è una navigazione tranquilla.

Come creare una grafica SVG

Adobe Illustrator è un programma di scelta quando si creano SVG. In realtà, possono essere creati da zero poiché è tutto XML, ma probabilmente è più semplice utilizzare un programma di progettazione, specialmente per SVG più complessi.

Suggerimenti per la progettazione in Adobe Illustrator

Come con qualsiasi altro progetto di Adobe Illustrator, il riquadro di delimitazione è il punto in cui viene creata l'illustrazione, quindi è importante assicurarsi che tutto sia contenuto. Il modo migliore per farlo è selezionare l'opera d'arte che vuoi avere nel tuo SVG e poi andare su Oggetto> Tavole da disegno> Adatta ai limiti dell'opera d'arte.

Questo è un passo molto importante. Ci sono state alcune occasioni in cui non l'abbiamo fatto e l'immagine sembrava molto piccola sul sito a causa dello spazio bianco extra. Fare in modo che tutto si adattasse perfettamente ai limiti ha risolto il problema.

Potrebbe non essere la cosa più divertente da fare quando sei in modalità progettazione, ma essere consapevoli e coerenti con la denominazione dei livelli ti aiuterà quando eseguirai futuri lavori di animazione con la grafica. "Layer One, Layer Two" renderà difficile ricordare quali livelli contenevano quale parte della grafica. Il motivo è che Illustrator utilizzerà questi nomi per generare gli ID nel codice SVG.

I gruppi di livelli sono fantastici, specialmente per la grafica più complessa. Sono anche usati per creare gruppi nei file SVG. Quando lavori con loro, ti consigliamo vivamente di assicurarti che i gruppi di livelli contengano solo forme correlate, per mantenere il tuo file pulito e facile da modificare in seguito.

In questo file, vedrai che la parte esterna della ruota è denominata "ruota esterna" e la parte interna ha un nome di "ruota interna". È semplice, ma funziona.

Questo è facoltativo, ma è utile eseguirlo tramite un ottimizzatore CSS. C'è una buona possibilità che tu possa ridurre le dimensioni del file in questo modo. Un'ottima opzione è SVG Optimizer di Peter Collingridge. SVG OMG è anche un'opzione che vale la pena esaminare.

Esportazione di una grafica SVG in Adobe Illustrator

Ora che hai la tua immagine SVG finale, deve essere esportata in modo che possa essere utilizzata sul web. Vai su File > Salva con nome > SVG. Puoi anche andare su File, Esporta, .SVG, a seconda della versione di Illustrator che stai utilizzando. Questo verrà salvato come flyweel_wheel.

Dopo averlo fatto, ci sarà una finestra di dialogo con alcune opzioni (se non vedi tutte le seguenti, vai su "Altre opzioni"):

Profilo: SVG 1.1

Tipo: controlla come desideri gestire i caratteri nel tuo progetto e incorpora i caratteri come SVG. Non ne abbiamo, quindi lasceremo questo set come SVG.

Subsetting: questa opzione incorpora i dettagli dei caratteri nel file SVG quando necessario. Ciò consente al file di visualizzare caratteri che potrebbero non essere presenti sul sistema dell'utente. È possibile includere solo i glifi utilizzati nell'SVG (il che riduce le dimensioni del file) quando è selezionato "Solo glifi utilizzati" (se si utilizza un carattere speciale per la grafica).

Posizione immagine: controlla le informazioni che possono essere memorizzate per i dati immagine rasterizzati all'interno del file SVG come URI dati con l'opzione "Incorporato". (Non molto rilevante in questo caso, ma ciò consente un collegamento o immagini incorporate, che aumenterebbero le dimensioni del file.)

Proprietà CSS: gli attributi di presentazione consentono di inserire gli stili CSS direttamente nell'SVG, se necessario. A seconda del caso d'uso, questo può essere ottimale o meno. Gli attributi di presentazione specificano cose come fill: blue; piuttosto che ciò che si vede tradizionalmente con gli stili inline: . Gli attributi di presentazione sono in genere più facili da sovrascrivere nei CSS.

Opzioni più avanzate: questo gruppo di caselle di controllo consente di modificare una varietà di impostazioni, incluso il numero di cifre decimali nei vari numeri. Uno dovrebbe essere sufficiente qui. Le opzioni avanzate sono per lo più necessarie se c'è molto testo nel tuo file. L'opzione per produrre meno elementi <tspan> può ridurre drasticamente le dimensioni del file SVG esportato.

In alcuni casi, il testo potrebbe essere disegnato lungo un percorso personalizzato. Con l'opzione "Usa elemento <textPath> per testo su percorso", viene esportato come testo su un percorso. Anche l'opzione "Reattivo" è importante. Se non è selezionato, il file SVG avrà una larghezza e un'altezza hardcoded.

Come animare SVG con i CSS

Ora che c'è un vero SVG con cui lavorare, possiamo creare una semplice animazione per vedere come funziona. La proprietà CSS transform e il metodo translate aiuteranno la ruota a muoversi. Animare con i CSS è fantastico perché non ci sono plugin o librerie che devono essere installati; tutto ciò di cui hai bisogno è HTML e CSS per iniziare.

Gli SVG possono essere animati allo stesso modo degli elementi HTML, utilizzando i fotogrammi chiave CSS e le proprietà di animazione o utilizzando le transizioni CSS. Alle animazioni più complesse di solito viene applicato un qualche tipo di trasformazione: traslazione, rotazione, ridimensionamento o inclinazione.

Animazione di base

Quella che segue è una semplice animazione che fa crescere la ruota al passaggio del mouse:

 svg {
   altezza: 20%;
   larghezza: 20%;
   riempire: #50c6db;
}
svg: al passaggio del mouse {
   trasformare: scale(1.25);
   durata della transizione: 1,5 s;
} 

Animazione della ruota che gira

Ecco dove il duro lavoro in Adobe Illustrator ripaga. Lo sforzo di nominare in modo efficace i livelli sarà messo a frutto. Con i gruppi di livelli esterno e interno, l'animazione può essere controllata e personalizzata, il che rappresenta un enorme vantaggio rispetto all'animazione della grafica raster.

La ruota SVG funzionerà come un grafico di filatore di caricamento. La ruota esterna girerà e quella interna crescerà leggermente man mano che il colore passa dal chiaro allo scuro.

Gli elementi SVG sono abbastanza prevedibili, per la maggior parte, ma ci sono alcune cose di posizionamento che potrebbero essere leggermente più complicate. Se sei abituato ad altri elementi HTML, rispondono a transform e transform-origin nello stesso. Una cosa da notare è che non seguono il box model, ovvero margine, bordo, padding, ecc. Ciò rende il posizionamento e la trasformazione di questi elementi leggermente più impegnativi.

Nozioni di base sull'origine della trasformazione

La proprietà transform-origin è usata per cambiare la posizione dell'origine di trasformazione di un elemento. L'origine di trasformazione di un elemento HTML è a (50%, 50%), che è il centro dell'elemento.

L'origine di trasformazione di un elemento SVG è posizionata nel punto (0, 0), che è l'angolo in alto a sinistra del canvas.

In che modo l'elemento SVG ruota attorno al proprio centro? È necessario un aggiustamento con la proprietà transform-origin. Questo può essere impostato utilizzando un valore percentuale o un valore assoluto (pixel, em o rem). Questo valore verrà impostato in relazione al riquadro di delimitazione dell'elemento.

Se dovessimo impostare l'origine della trasformazione di <rect> al centro usando valori percentuali, sarebbe fatto così:

 rect {
  trasformazione-origine: 50% 50%;
}

Fare la ruota

Innanzitutto, impostare i fotogrammi chiave di rotazione è fondamentale. Questo sarà un grafico spinner, quindi è necessaria la rotazione completa. Ci sarà anche un effetto di dissolvenza applicato. Questo esempio può essere trovato su Codepen.

 @keyframe spin {
    da {transform:rotate(0deg);}
    per {trasformare: ruotare (360 gradi);}
}
@keyframes fadeIn {
    0% {
        opacità: .35;
    }
    50% {
        opacità: .5;
    }
    75% {
        opacità: .75;
    }
    100% {
        opacità: .25;
    }
}

Successivamente, è importante creare un wrapper SVG.

 .svg-contenitore {
  altezza: 100%;
  larghezza: 100%;
  altezza massima: 15 cm;
  larghezza massima: 15 cm;
  margine: 0 automatico;
}

Sono stati creati stili SVG generali ed è qui che viene specificata l'origine della trasformazione.

 svg {
  superiore: 50%;
  a sinistra: 50%;
  posizione: assoluta;
  altezza massima: 15 cm;
  larghezza massima: 15 cm;
  larghezza: 20%;
  altezza: 20%;
  riempire: #50c6db;
  trasformare: tradurre(50%, 50%);
} 

È qui che la denominazione dei livelli diventa molto utile. L'animazione rotante viene applicata all'intera grafica SVG perché è stata specificata su #outer-wheel , ma la ruota interna ha un effetto di dissolvenza che era inteso solo per quella parte interna della grafica. Prendendo di mira solo la #inner-wheel , è stata applicata la dissolvenza nell'animazione.

 #ruota-esterna {
  animazione: spin 4s infinito lineare;
}
#ruota-interna {
  animazione: fadeIn 2s infinito lineare;
} 

Spero che questo ti dia una buona introduzione agli SVG e alle tecniche di animazione di base. Man mano che li usi di più, queste idee di base ti aiuteranno a creare animazioni più complesse.