Ciao, e benvenuto nella terza puntata della trentesima stagione. Nelle scorse puntate abbiamo capito che SVG descrive le forme invece di memorizzare i punti, ed è quindi vettoriale. Oggi vediamo il superpotere più grande che nasce da questa natura, quello che dà persino il nome a SVG, e che è la ragione principale del suo successo: la scalabilità infinita. Un'immagine SVG può essere ingrandita o rimpicciolita a qualsiasi dimensione, sempre restando perfetta, nitida, senza mai sgranarsi. La S iniziale del nome SVG sta proprio per scalabile. Oggi capiamo perché questo è possibile, e perché è così prezioso.
Partiamo dal problema che affligge le immagini normali, quelle raster, perché è il contrasto che fa risaltare il superpotere di SVG. Un'immagine raster è fatta di un numero fisso di puntini, i pixel. Va benissimo alla sua dimensione originale. Ma cosa succede se la ingrandisci molto? I puntini, che sono in numero fisso, devono diventare più grandi per riempire lo spazio, e allora si vedono: l'immagine si sgrana, diventa sfocata, appaiono quei quadrettoni brutti. Hai finito i puntini: non ce ne sono abbastanza per riempire la dimensione più grande mantenendo il dettaglio. L'immagine raster ha una risoluzione fissa, e ingrandirla oltre quella la rovina. È il limite di avere i punti già memorizzati in numero fisso.
Ed ecco perché SVG non ha questo problema, che è il cuore del suo superpotere. SVG non ha puntini in numero fisso: ha la descrizione matematica delle forme. E la matematica non ha una dimensione fissa, non ha una risoluzione: un cerchio descritto matematicamente è un cerchio a qualsiasi dimensione. Quando devi mostrare un'immagine SVG più grande, il computer non deve ingrandire dei puntini esistenti: semplicemente ridisegna le forme alla nuova dimensione, ricalcolandole. Il risultato è sempre perfetto, nitido, a qualsiasi grandezza, perché viene ridisegnato ogni volta esattamente per la dimensione richiesta. Non ci sono puntini da ingrandire e sgranare: ci sono forme da ridisegnare, sempre perfette.
Voglio riprendere l'immagine della ricetta, perché spiega tutto alla perfezione. Ricordi? Il raster è la torta già fatta, di una dimensione fissa; SVG è la ricetta. Ora, prova a ingrandire una torta già fatta: non puoi, o la deformi. Ma con la ricetta puoi fare una torta di qualsiasi dimensione, piccola o gigantesca, sempre fatta bene, perché la rifai da capo alla dimensione che vuoi. SVG è così: avendo la ricetta, la descrizione delle forme, può ridisegnare l'immagine a qualsiasi dimensione, sempre perfetta, esattamente come dalla ricetta puoi fare torte di ogni misura. Avere la descrizione invece del risultato già fatto è ciò che permette di scalare all'infinito. La ricetta scala, la torta no.
Voglio farti apprezzare quanto sia potente e utile questa scalabilità nel mondo reale, perché non è un dettaglio da appassionati. Pensa a un logo. Lo stesso logo deve apparire minuscolo, come icona in un angolo, e gigantesco, come su un cartellone. Con un'immagine raster, ti servirebbero versioni diverse per ogni dimensione, e comunque ingrandirla troppo la rovinerebbe. Con SVG, un solo file, la stessa ricetta, funziona perfettamente a ogni dimensione, dall'icona al cartellone, sempre nitido. Un solo file per tutte le dimensioni, sempre perfetto: è un vantaggio enorme, di praticità e di qualità. La scalabilità di SVG non è teoria: è ciò che rende un logo o un'icona utilizzabile ovunque, a ogni grandezza, senza compromessi.
Voglio farti apprezzare una parentela bellissima con la stagione scorsa, perché mostra un filo profondo. Ricordi il CSS e il suo progettare per l'ignoto, l'idea di un disegno che si adatta a infiniti schermi diversi? SVG ha esattamente lo stesso spirito, applicato alle immagini: un'immagine che si adatta a infinite dimensioni. Il CSS diceva un disegno, infiniti schermi; SVG dice un'immagine, infinite dimensioni. In entrambi i casi, la stessa idea potente: descrivere qualcosa una volta sola, in modo che si adatti perfettamente a una varietà infinita di contesti. È la forza del descrivere invece di fissare: ciò che è descritto può adattarsi, ciò che è già fatto, no. SVG e CSS condividono questa magia dell'adattamento infinito.
Voglio aggiungere un vantaggio legato alla scalabilità, che oggi è cruciale: l'indipendenza dalla risoluzione. Gli schermi di oggi sono diversissimi tra loro, e alcuni sono a densità altissima, capaci di mostrare dettagli finissimi. Un'immagine raster, fatta per una densità, appare meno nitida su uno schermo più fine, perché non ha abbastanza puntini per sfruttarlo. SVG, invece, essendo ridisegnabile a qualsiasi finezza, appare sempre perfettamente nitido su qualsiasi schermo, di qualsiasi densità, perché si adatta anche a quella. Questa indipendenza dalla risoluzione, l'apparire perfetto su ogni tipo di schermo, è un altro dono della scalabilità, ed è diventato prezioso proprio oggi, con la varietà di schermi che abbiamo.
Per oggi ci fermiamo qui. Il superpotere di SVG, quello che gli dà il nome, è la scalabilità infinita: può essere mostrato a qualsiasi dimensione restando sempre perfetto e nitido. Perché? Perché non ha puntini fissi da ingrandire e sgranare, come il raster, ma la descrizione matematica delle forme, che può ridisegnare a qualsiasi grandezza, come una ricetta permette di fare torte di ogni misura. Questo rende un solo file utilizzabile a ogni dimensione, dall'icona al cartellone, e sempre nitido su ogni schermo. È lo stesso spirito del disegno adattivo del CSS: un'immagine, infinite dimensioni. Nella prossima puntata vediamo come funziona questa magia, dentro: la mappa e il territorio. Nelle note trovi qualche spunto. Se ti è utile, condividila. Grazie per l'ascolto, e ci sentiamo alla prossima.