Dentro un file SVG: viewBox, tracciati e come ripulirlo

SVG (Scalable Vector Graphics) è un formato vettoriale basato su XML. La sua caratteristica più preziosa è anche la più trascurata: è testo. Si può aprire con un editor qualunque, leggere, correggere a mano, confrontare tra versioni. Chi impara a leggerlo smette di trattare gli SVG come scatole nere e risolve in pochi minuti problemi che altrimenti richiederebbero di riaprire il file nel programma di grafica.

Lo scheletro minimo

Ecco un SVG completo e valido che disegna un cerchio blu con un quadrato arancione:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
  <circle cx="35" cy="50" r="25" fill="#1e5aa8"/>
  <rect x="55" y="30" width="40" height="40" fill="#e07b1f"/>
</svg>

Tre cose da notare subito:

• L'attributo xmlns dichiara lo spazio dei nomi: senza di esso, aperto come file autonomo, l'SVG può non essere riconosciuto.
• Le forme sono elementi con attributi geometrici espliciti.
• width e height dicono quanto grande mostrare l'immagine; viewBox dice quale porzione del piano disegnare.

Il viewBox, il concetto chiave

Il viewBox ha quattro numeri: x minimo, y minimo, larghezza, altezza. Definisce una "finestra" sul sistema di coordinate interno, che viene poi adattata all'area di visualizzazione. Nell'esempio, il piano va da 0 a 100 in entrambe le direzioni ed è mostrato in un riquadro di 200 × 200: ogni unità interna diventa due pixel.

Questo meccanismo è ciò che rende l'SVG scalabile. Se si omettono width e height e si lascia solo il viewBox, l'immagine si adatta al contenitore. Se invece manca il viewBox, l'SVG non sa come scalare e viene ritagliato o resta a dimensione fissa: è una delle cause più comuni di icone che non si ridimensionano.

Quando proporzioni del viewBox e del riquadro non coincidono, interviene preserveAspectRatio, che decide se adattare, centrare o ritagliare. Il valore predefinito centra il disegno mantenendo le proporzioni.

Il linguaggio dei tracciati

Le forme complesse si descrivono con l'elemento path e il suo attributo d, che contiene una mini-sintassi di comandi:

Le lettere maiuscole usano coordinate assolute, le minuscole coordinate relative al punto corrente. Un triangolo, per esempio, è M10 90 L50 10 L90 90 Z. Gli ottimizzatori sfruttano le coordinate relative perché producono numeri più corti.

Gruppi, trasformazioni, riutilizzo

• <g> raggruppa elementi e permette di applicare a tutti uno stile o una trasformazione.
• transform accetta translate, rotate, scale, skewX, skewY e matrix. Le trasformazioni si compongono e si applicano da destra a sinistra rispetto all'elemento.
• <defs> contiene elementi non disegnati direttamente: sfumature, maschere, tracciati di ritaglio, simboli.
• <symbol> e <use> permettono di definire un disegno una volta e richiamarlo più volte: è il principio degli "sprite" di icone.

Gli stili si possono scrivere come attributi (fill="red") o come CSS, interno al file o, se l'SVG è inserito direttamente in una pagina, ereditato dalla pagina. Questo consente, per esempio, di colorare un'icona con fill="currentColor" perché prenda il colore del testo circostante.

Cosa lasciano gli editor dentro un SVG

Esportando da un programma di grafica si ottiene spesso un file molto più pesante del necessario. Aprendolo si trovano tipicamente:

• metadati dell'editor, commenti e spazi dei nomi proprietari;
• coordinate con sei o più decimali, inutili per un'icona;
• gruppi annidati vuoti o con un solo figlio;
• trasformazioni accumulate che si potrebbero applicare direttamente alle coordinate;
• immagini raster incorporate in base64, a volte all'insaputa di chi ha esportato;
• identificativi lunghi e mai usati.

Ripulire un SVG passo per passo

Nel mio lavoro seguo una procedura semplice:

1. Controllo il viewBox: deve esistere e inquadrare il disegno senza margini casuali.
2. Cerco immagini incorporate: una stringa data:image/png;base64 dentro un "vettoriale" spiega quasi sempre un peso anomalo.
3. Passo un ottimizzatore come SVGO, con impostazioni prudenti, e confronto visivamente il risultato.
4. Riduco la precisione a uno o due decimali per icone e loghi semplici.
5. Converto i testi in tracciati se il file deve essere usato dove il font potrebbe mancare, conservando una copia con il testo modificabile.
6. Verifico l'accessibilità: per SVG significativi aggiungo un elemento <title>.

Un'icona esportata a 8 KB scende spesso sotto 1 KB senza alcuna differenza visibile.

Una nota sulla sicurezza

Poiché è XML, un SVG può contenere script e riferimenti esterni. Nelle pagine web, quando è mostrato tramite un elemento img, gli script non vengono eseguiti; aperto direttamente o inserito nel codice della pagina, invece, sì. Per questo chi accetta SVG caricati dagli utenti dovrebbe sanificarli o convertirli in raster prima di pubblicarli.

In sintesi

• Un SVG è XML leggibile: si può ispezionare e correggere con un editor di testo.
• Il viewBox definisce il sistema di coordinate interno ed è ciò che rende il file scalabile.
• L'attributo d dei tracciati usa comandi brevi, assoluti (maiuscoli) o relativi (minuscoli).
• I file esportati dagli editor contengono spesso metadati, decimali e immagini incorporate da eliminare.
• Gli SVG caricati da terzi vanno sanificati perché possono contenere script.