Ciao, e benvenuto nella settima puntata della trentesima stagione. Nelle scorse puntate abbiamo visto che SVG è una scena di oggetti distinti e un documento aperto e integrato nel web. Oggi vediamo cosa nasce dalla combinazione di queste due cose, ed è forse la capacità più straordinaria di SVG, quella che lo rende davvero speciale rispetto a qualsiasi immagine normale: un'immagine SVG può essere viva. Può essere stilata, animata, resa interattiva. Non un'istantanea morta e fissa, ma un disegno che cambia, si muove, reagisce. Oggi capiamo cosa significa un'immagine viva.
Partiamo dal ricordare le due caratteristiche che rendono possibile tutto questo, perché insieme sono la chiave. Prima: SVG è una scena di oggetti distinti, come abbiamo visto, ciascuno una forma a sé, indicabile e manipolabile. Seconda: SVG è un documento aperto e integrato nel web, che dialoga con tutti gli strumenti del web. Metti insieme queste due cose, e ottieni qualcosa di potente: hai un'immagine fatta di oggetti che puoi indicare uno per uno, e che vive dentro il web, dove puoi usare su di essa tutti gli strumenti che usi sulle pagine. Da questa combinazione nasce la vitalità di SVG: la capacità di dare stile, movimento e interazione alle singole forme dell'immagine.
Vediamo la prima forma di vitalità, lo stile, perché riprende la stagione scorsa. Ricordi il CSS, il linguaggio con cui si dà stile alle pagine, cambiando colori, dimensioni, aspetto? Ebbene, siccome SVG è fatto di oggetti ed è integrato nel web, puoi usare lo stesso CSS per dare stile alle forme di un'immagine SVG, esattamente come lo usi per le pagine. Puoi dire, con gli stessi strumenti, questo cerchio è di questo colore, questa forma cambia aspetto quando ci passi sopra. Le immagini SVG si vestono con lo stesso guardaroba delle pagine. Questa possibilità di stilare le singole forme con gli strumenti noti del web è la prima, potente forma di vita di un'immagine SVG.
Vediamo la seconda forma di vitalità, l'animazione, che è ancora più spettacolare. Siccome ogni forma di SVG è un oggetto distinto, puoi farla cambiare nel tempo: puoi farla muovere, crescere, ruotare, cambiare colore, apparire e scomparire, tutto in movimento. Puoi animare le singole forme di un'immagine, dando vita a disegni che si muovono e si trasformano. Un'icona che si anima, un diagramma che prende forma davanti ai tuoi occhi, un disegno che danza: tutto questo è possibile perché le forme sono oggetti distinti che puoi far cambiare nel tempo. L'animazione trasforma un'immagine SVG da disegno fermo a disegno vivo, che si muove e si trasforma. È la vita che entra nell'immagine.
Vediamo la terza forma di vitalità, l'interazione, che è forse la più sorprendente. Siccome le forme di SVG sono oggetti in un documento web vivo, possono reagire a ciò che fa l'utente: al passaggio del dito, al clic, al movimento. Una forma può illuminarsi quando ci passi sopra, cambiare quando la tocchi, rispondere alle tue azioni. Un'immagine SVG può diventare interattiva, un disegno con cui puoi giocare, che risponde a te. Pensa a un diagramma in cui tocchi una parte e questa si evidenzia e ti mostra dei dettagli: quello è SVG interattivo. L'interazione trasforma l'immagine da qualcosa da guardare a qualcosa con cui dialogare. L'immagine non è più solo osservata: risponde.
Voglio farti apprezzare quanto sia profonda la differenza tra un'immagine viva e una morta, perché è il cuore di questa puntata. Un'immagine normale, una foto, è un'istantanea congelata: la guardi, e basta, non cambia, non si muove, non reagisce. È morta, nel senso che è fissa per sempre. Un'immagine SVG, invece, può essere viva: può cambiare stile, muoversi, reagire, trasformarsi, rispondere. Non è un'istantanea congelata, ma un disegno vivo, capace di movimento e di dialogo. Questa differenza, tra un'immagine congelata e un'immagine viva, è enorme, e apre possibilità che con le immagini normali sono semplicemente impensabili. SVG non è solo un'immagine migliore: è un tipo diverso di immagine, viva.
Voglio darti una prospettiva onesta, per chiudere, perché la vitalità va usata con misura. La capacità di stilare, animare, rendere interattive le immagini è straordinaria, ma va usata con giudizio. Non tutto deve muoversi e reagire: un'animazione eccessiva può distrarre o infastidire, e un'interazione inutile può complicare invece di aiutare. La vitalità di SVG è uno strumento potente, che dà valore quando serve davvero, per spiegare, guidare, rendere più chiara o piacevole una cosa, ma che va dosato con misura, non sparso ovunque. Come sempre, la potenza va accompagnata dal buon senso: la vita di un'immagine è preziosa quando ha uno scopo, non quando è solo esibizione. Usata bene, però, è una delle cose più belle del web.
Per oggi ci fermiamo qui. La combinazione di essere una scena di oggetti e un documento web integrato rende un'immagine SVG viva. Può essere stilata, con gli stessi strumenti del CSS che vestono le pagine. Può essere animata, facendo muovere e trasformare le singole forme nel tempo. E può essere interattiva, facendo reagire le forme alle azioni dell'utente. Non un'istantanea congelata come una foto, ma un disegno vivo, che cambia, si muove, risponde: un tipo diverso di immagine. Con onestà, questa vitalità va dosata con misura e con uno scopo. Nella prossima puntata affrontiamo con onestà i confini di SVG: quando usare il vettoriale, e quando no. Nelle note trovi qualche spunto. Se ti è utile, condividila. Grazie per l'ascolto, e ci sentiamo alla prossima.