SVG (Scalable Vector Graphics) è un formato di immagine vettoriale che consente di creare grafica di alta qualità che può essere ingrandita o ridotta senza perdere la sua risoluzione. In più, è possibile animare le immagini SVG utilizzando CSS.
Per esempio, se assumiamo di avere un’immagine SVG con un elemento `
```
```
Qui stai creando un cerchio di colore giallo con un bordo verde. L’attributo `id=“myCircle”` è utilizzato per fare riferimento a questa particolare immagine SVG nel tuo CSS.
Ora, puoi creare un’animazione CSS che, ad esempio, cambia il colore di riempimento del cerchio da giallo a rosso:
```
@keyframes fill {
from { fill: yellow; }
to { fill: red; }
}
#myCircle circle {
animation-name: fill;
animation-duration: 4s;
}
```
Questa animazione CSS cambia il colore di riempimento del cerchio da giallo a rosso in 4 secondi. L’animazione si chiamerà “fill”, come definito dal regola `@keyframes`.
Ricorda, però, che non tutti gli attributi SVG possono essere animati con CSS. In generale, puoi animare gli attributi SVG che sono di tipo lunghezza, frequenza, angolo, tempo, percentuale, numero o enumerazione. Per gli altri tipi di attributi SVG, dovrai usare SMIL (Synchronized Multimedia Integration Language) o JavaScript.
Inoltre, la supporto del browser per le animazioni SVG è buono, ma non perfetto. Quindi, assicurati sempre di testare le tue animazioni su diversi browser per garantire una buona esperienza utente.
