SVG sta per Scalable Vector Graphics. È lo standard aperto del W3C per le immagini descritte come istruzioni anziché pixel: disegna un cerchio qui, segui questa curva, riempi quella forma con questo colore, imposta questa parola in quel carattere. Poiché l'immagine è un insieme di istruzioni, può essere disegnata a qualsiasi dimensione senza mai diventare sfocata o sgranata, ed è per questo che loghi, icone, mappe e grafici sono così spesso SVG.
Come un SVG memorizza un'immagine
Un file SVG è XML: testo leggibile che puoi aprire con qualsiasi editor. Un elemento <path> contiene una stringa compatta di comandi di disegno, <rect>, <circle> e <polygon> fanno le cose ovvie, <text> contiene vero testo selezionabile e <g> raggruppa gli elementi in modo che possano essere spostati o stilizzati insieme. Un attributo viewBox definisce il sistema di coordinate, che è ciò che permette a tutto il disegno di ridimensionarsi correttamente.
Poiché è testo, un SVG si comprime estremamente bene; un SVG gzippato (a volte con estensione .svgz) è spesso solo una frazione della dimensione originale. Essendo testo significa anche che un SVG può essere stilizzato con CSS, animato e gestito tramite script. Un browser lo tratta come parte del documento anziché come un'immagine opaca.
Questa ultima capacità ha una dimensione di sicurezza da conoscere: un SVG può contenere un elemento <script>. Ovunque un SVG sia accettato come caricamento da parte dell'utente deve essere sanificato o servito in modo che non possa eseguire codice, ed è per questo che alcuni siti rifiutano gli SVG anche se accettano ogni formato raster.
SVG è un contenitore poco adatto alle fotografie. Puoi incorporare un'immagine raster al suo interno, ma allora hai un'immagine a pixel racchiusa in XML e nessun vantaggio in termini di ridimensionamento.
Quali metadati contiene un SVG
SVG ha un elemento dedicato <metadata> e, poiché lo standard non stabilisce cosa debba contenere, gli editor vi inseriscono una grande quantità di dati. Più comunemente contiene RDF che usa i termini Dublin Core: dc:title, dc:creator, dc:date, dc:description, dc:rights e un URI di licenza. Un elemento <title> e <desc> può anche trovarsi alla radice o su qualsiasi singola forma, dove funge anche da testo di accessibilità per gli screen reader.
Poi ci sono i dati di gestione interna dell'editor, che di solito rappresentano la parte maggiore. Inkscape scrive un intero namespace proprio: la geometria della finestra del documento, il livello di zoom e la posizione del cursore all'ultimo salvataggio, le guide, le impostazioni della griglia, i nomi e la visibilità dei livelli e una stringa inkscape:version. Illustrator incorpora un pacchetto XMP con i propri identificatori di documento e la cronologia. Nulla di tutto ciò disegna qualcosa.
Ne derivano due aspetti pratici. I dati dell'editor possono costituire facilmente la maggior parte del file, quindi passare un SVG attraverso un ottimizzatore prima della pubblicazione spesso ne dimezza le dimensioni. E i nomi dei livelli sono testo che hai scritto tu: <g inkscape:label="client logo v3 REJECTED"> è invisibile nell'immagine e perfettamente visibile nel file.
Quando usare SVG
Usa SVG per tutto ciò che è disegnato e non fotografato: loghi, icone, diagrammi, grafici, illustrazioni, mappe. È la scelta giusta per il web, dove un unico file serve ogni densità di schermo, e per la stampa, dove può essere scalato a qualsiasi dimensione.
Usa PNG o JPG per le fotografie e per tutto ciò che ha toni continui. Esporta anche una copia raster piatta quando ti serve un'immagine che si apra in software troppo vecchio o troppo limitato per SVG e rimuovi i metadati dell'editor prima della pubblicazione, sia per ridurre le dimensioni del file sia perché i nomi dei livelli non sono sempre destinati al pubblico.