Ciao, e benvenuto nella prima puntata della trentesima stagione di questo podcast. Trenta stagioni: un altro piccolo traguardo tondo, e ti ringrazio di essere ancora qui a questo punto del viaggio. La festeggiamo con un tema che si affianca perfettamente a quello della scorsa stagione: dopo il CSS, oggi cominciamo a raccontare SVG, il modo con cui il web crea immagini che si descrivono invece di essere disegnate punto per punto. E come per il CSS, il segreto per capire SVG sta in una scelta di fondo, sorprendente e potente: descrivere il disegno, non memorizzare i punti. Oggi partiamo da qui, dai due modi profondamente diversi di fare un'immagine.
Partiamo dalla domanda di base, che quasi nessuno si pone ma che apre tutto: come si conserva un'immagine dentro un computer? Sembra una cosa sola, ma in realtà ci sono due modi profondamente diversi di farlo, due filosofie opposte. Il primo modo, quello più comune, quello delle foto, è memorizzare i punti: registrare, uno per uno, il colore di ogni minuscolo puntino che compone l'immagine, come un'enorme griglia di puntini colorati. Il secondo modo, quello di SVG, è completamente diverso: invece di registrare i puntini, descrivere le forme, dire con la matematica qui c'è un cerchio di questo colore, qui una linea, e lasciare che il computer le disegni. Memorizzare i punti, oppure descrivere le forme: due strade opposte.
Voglio farti apprezzare quanto sia diversa questa seconda strada, quella di SVG, perché è controintuitiva. Siamo abituati a pensare a un'immagine come a una cosa fatta di puntini, di pixel, come una foto ingrandita all'estremo. SVG rovescia questa idea: non conserva nessun puntino. Conserva, invece, la descrizione di come disegnare l'immagine: un elenco di forme, con le loro posizioni, dimensioni, colori, espressi matematicamente. Quando l'immagine deve apparire, il computer legge questa descrizione e disegna le forme al momento. SVG non è un'immagine già disegnata, fatta di puntini: è la ricetta per disegnarla, eseguita ogni volta che serve. Conserva il come fare, non il risultato già fatto.
Voglio darti l'immagine che rende questa differenza concreta, perché è il cuore di tutto. Immagina due modi di conservare una torta. Nel primo, conservi la torta già fatta: è lì, pronta, ma di una dimensione fissa, quella con cui è stata sfornata. Nel secondo, non conservi la torta, ma la ricetta: le istruzioni per farla. La ricetta occupa pochissimo spazio, e ti permette di fare la torta della dimensione che vuoi, ogni volta. Memorizzare i punti è come conservare la torta già fatta; descrivere le forme, come fa SVG, è come conservare la ricetta. E, come vedremo, avere la ricetta invece della torta già fatta è ciò che dà a SVG i suoi superpoteri.
Voglio farti riconoscere una parentela con la stagione scorsa, perché è illuminante e non casuale. Ricordi la natura del CSS? Anche il CSS descrive invece di disegnare: gli dici come vuoi che appaiano le cose, e il browser le realizza. SVG condivide esattamente questa filosofia, applicata alle immagini: descrivi le forme che vuoi, e il computer le disegna. Sono due fratelli nello spirito, il CSS e SVG: entrambi dichiarativi, entrambi fondati sul descrivere invece di produrre già fatto, entrambi capaci, proprio per questo, di adattare una descrizione a infiniti contesti. Il CSS adatta lo stile a infiniti schermi; SVG, come vedremo, adatta un'immagine a infinite dimensioni. Stessa bella filosofia, applicata a due campi diversi del web visivo.
Voglio darti fin d'ora la lente con cui guardare SVG in tutta la stagione. SVG è il formato che descrive il disegno invece di memorizzare i punti. Da questa scelta di fondo discende tutto: la sua scalabilità infinita, il suo essere un documento aperto e vivo, il suo essere fatto di forme che puoi manipolare. Tieni a mente questa chiave, descrivere invece di memorizzare, la ricetta invece della torta, e capirai il senso di ogni cosa, compresi i suoi superpoteri e i suoi limiti. È la stessa chiave dichiarativa del CSS, applicata alle immagini.
Voglio anticiparti dove ci porterà questa scelta, perché è affascinante. Descrivere il disegno invece di memorizzare i punti dà a SVG capacità che un'immagine normale non può avere. Può ingrandirsi all'infinito restando perfetta, perché la si ridisegna alla dimensione voluta. È un documento leggibile e modificabile, non una scatola opaca. È fatta di oggetti che puoi stilare, animare, rendere interattivi, come i pezzi di una scena viva. Un'immagine SVG non è un'istantanea morta e fissa, ma un disegno vivo e flessibile. Tutte queste cose meravigliose nascono da quell'unica scelta di fondo: descrivere invece di memorizzare.
Per oggi ci fermiamo qui. Ci sono due modi profondamente diversi di fare un'immagine in un computer. Uno, quello delle foto, memorizza i punti: registra il colore di ogni minuscolo puntino, come una griglia. L'altro, quello di SVG, descrive le forme: dice con la matematica quali forme disegnare, e lascia che il computer le disegni al momento, come una ricetta invece di una torta già fatta. È la stessa filosofia dichiarativa del CSS, applicata alle immagini, e da questa scelta nascono tutti i superpoteri di SVG. Tieni la chiave: descrivere invece di memorizzare. Nella prossima puntata approfondiamo le due famiglie: pixel contro forme, raster e vettoriale. Nelle note trovi qualche spunto. Se ti è utile, condividila. Grazie per l'ascolto, e ci sentiamo alla prossima.