Come creare animazioni SVG con CSS

L'animazione Web è di gran moda in questi giorni e non c'è limite a ciò che puoi progettare con gli SVG. Se sei pronto per provarlo sul tuo sito, conoscere i concetti di animazione di base ti aiuterà a costruire 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 usare CSS, filtri e interattività per migliorare gli SVG.

Prima di immergerci nel tutorial, dovresti avere familiarità con le transizioni e le trasformazioni CSS. (Se non lo sei, dai un'occhiata a questo articolo!) Alcuni degli stessi concetti verranno usati con gli SVG.

Nozioni di base su 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 intendo. Il motivo per cui gli SVG possono essere ridimensionati a dimensioni diverse senza perdere la 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 grafico utilizzato per modificarle. Non sono complessi come un JPG o altri formati di file immagine, il che consente di progettarli e modificarli manualmente in un editor di testo, se si sceglie di farlo. Possono essere modificati e stilizzati con CSS, rendendoli fantastici con cui progettare sul web.

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

Come creare una grafica SVG

Adobe Illustrator è il mio programma preferito durante la creazione di SVG. In realtà, possono essere creati da zero poiché è tutto XML, ma probabilmente è più facile utilizzare un programma di progettazione, soprattutto per SVG più complessi.

Suggerimenti per la progettazione in Adobe Illustrator

Come con qualsiasi altro progetto di Adobe Illustrator, il rettangolo di selezione è il punto in cui viene creata l'illustrazione, quindi è importante assicurarsi che tutto sia contenuto. Il modo migliore per farlo è selezionare la grafica che desideri avere nel tuo SVG e quindi andare su Oggetto> Tavole da disegno> Adatta a limiti di grafica.

Questo è un passo molto importante. Ci sono state alcune occasioni in cui non l'ho fatto e l'immagine sembrava molto piccola sul sito a causa dello spazio bianco extra. Far rientrare tutto perfettamente nei 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 farai 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 consiglio 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 il nome di "ruota interna". È semplice, ma funziona.

Questo è facoltativo, ma è utile eseguirlo tramite un ottimizzatore CSS. Ci sono buone probabilità che tu possa ridurre le dimensioni del file in questo modo. Un'ottima opzione è SVG Optimizer di Peter Collingridge. Anche SVG OMG è 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.

Una volta fatto, ci sarà una finestra di dialogo con alcune opzioni (se non vedi tutto quanto segue, vai su "Altre opzioni"):

Profilo: SVG 1.1

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

Sottoimpostazione: questa opzione incorpora i dettagli del carattere nel file SVG quando necessario. Ciò consente al file di visualizzare i caratteri che potrebbero non essere presenti nel sistema dell'utente. È possibile includere solo i glifi utilizzati nell'SVG (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 archiviate per i dati dell'immagine rasterizzata all'interno del file SVG come URI di 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 potrebbe 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 in CSS.

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

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

Come animare SVG con 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. L'animazione con CSS è fantastica 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 applicata una sorta 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 {
   height: 20%;
   width: 20%;
   fill: #50c6db;
}

svg:hover {
   transform: scale(1.25);
   transition-duration: 1.5s;
}

Animazione della ruota che gira

Ecco dove il duro lavoro in Adobe Illustrator ripaga. Lo sforzo di nominare efficacemente i livelli sarà sfruttato al meglio. Con i gruppi di livelli esterno ed interno, l'animazione può essere controllata e personalizzata, il che è un enorme vantaggio rispetto all'animazione della grafica raster.

La ruota SVG funzionerà come una grafica spinner 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 alla trasformazione e all'origine della trasformazione nello stesso modo. Una cosa da notare è che non seguono il modello della scatola, ovvero margine, bordo, padding, ecc. Questo rende leggermente più impegnativo il posizionamento e la trasformazione di questi elementi.

Nozioni di base sull'origine della trasformazione

La proprietà transform-origin viene utilizzata per modificare la posizione dell'origine della 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 dell'area di disegno.

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, ems o rem). Questo valore verrà impostato rispetto al riquadro di delimitazione dell'elemento.

Se dovessimo impostare l'origine di trasformazione di <rect> al centro usando valori percentuali, sarebbe fatto in questo modo:

rect {
  transform-origin: 50% 50%;
}

Fare la ruota

Innanzitutto, è fondamentale impostare i fotogrammi chiave di rotazione. Questa sarà una grafica spinner, quindi è necessaria la rotazione completa. Verrà applicato anche un effetto di dissolvenza in entrata. Questo esempio può essere trovato su Codepen.

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

@keyframes fadeIn {
    0% {
        opacity: .35;
    }

    50% {
        opacity: .5;
    }

    75% {
        opacity: .75;
    }

    100% {
        opacity: .25;
    }
}

Successivamente, è importante creare un wrapper SVG.

.svg-container {
  height:100%;
  width:100%;
  max-height:15cm;
  max-width:15cm;
  margin: 0 auto;
}

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

svg {
  top: 50%;
  left: 50%;
  position: absolute;
  max-height:15cm;
  max-width:15cm;
  width: 20%;
  height: 20%;
  fill: #50c6db;
  transform: translate(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 pensato solo per quella parte interna della grafica. Puntando solo sulla #inner-wheel , è stata applicata la dissolvenza in entrata.

#outer-wheel {
  animation: spin 4s infinite linear;
}

#inner-wheel {
  animation: fadeIn 2s infinite linear;
}

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

Cosa c'è dopo: design
siti più velocemente!

In questa guida, tratteremo suggerimenti su come lavorare più velocemente e velocizzare il flusso di lavoro di WordPress. Dalla configurazione iniziale del sito alla pubblicazione in diretta, scopri come puoi ridurre le ore di lavoro dal tuo lavoro quotidiano!

Scarica gratis qui.

Questo articolo è stato originariamente pubblicato il 6-1-2017. È stato aggiornato l'ultima volta il 16-2-2019.