Comprimi file SVG

L'SVG è codice, non pixel

Un file SVG (Scalable Vector Graphics) è un documento di testo in XML che descrive forme: tracciati, cerchi, sfumature, testo. Poiché contiene istruzioni invece di pixel, resta nitido a qualsiasi dimensione, da una favicon di 16 pixel a un cartellone pubblicitario. Icone, loghi, illustrazioni, grafici e mappe sul web sono spesso in SVG, e il formato è uno standard W3C dal 2001.

Essere testo ha un effetto collaterale: la dimensione del file dipende da quanto è stato prolisso l'editor nello scriverlo, non da quanto grande viene mostrata l'immagine. Due SVG che appaiono identici possono avere dimensioni diverse anche di parecchie volte.

Cosa rende i file SVG più pesanti del necessario

• Metadati dell'editor. Illustrator, Inkscape, Figma e Sketch aggiungono i propri namespace, nomi dei livelli, commenti di esportazione e talvolta una copia incorporata del documento modificabile.
• Precisione eccessiva. Coordinate come 12.483920174 dove 12.48 appare esattamente uguale a qualsiasi dimensione realistica.
• Struttura ridondante. Gruppi vuoti, livelli nascosti, valori predefiniti degli attributi, definizioni inutilizzate e stili che potrebbero essere più brevi.
• Sintassi dei tracciati prolissa. Comandi assoluti dove quelli relativi sono più brevi, lettere di comando ripetute, spazi superflui.
• Bitmap incorporate. Una foto incollata in un'illustrazione viene memorizzata come testo Base64 dentro l'SVG, che occupa circa un terzo in più del file immagine originale.

Come lo strumento ottimizza gli SVG

Lo strumento esegue nel browser SVGO, l'ottimizzatore SVG open source più diffuso. Rimuove metadati e commenti, elimina i gruppi inutili, accorcia i dati dei tracciati, arrotonda i numeri a 3 cifre decimali per impostazione predefinita (puoi scegliere da 0 a 6) e unisce gli stili, ripetendo i passaggi finché non cambia più nulla. Il risultato è comunque un normale SVG che puoi aprire in qualsiasi editor o incollare nell'HTML. Nei nostri test su otto SVG, da icone ottimizzate a mano a un'esportazione di Inkscape piena di dati dell'editor, il risparmio è andato dall'8% al 42%.

In senso stretto l'ottimizzazione è tecnicamente con perdita: l'arrotondamento sposta le coordinate di quantità minime, e i dati specifici dell'editor spariscono, quindi non puoi riaprire il file con tutti i suoi livelli originali. Conserva il file sorgente del tuo programma di grafica e considera l'SVG ottimizzato come la versione da pubblicare.

I server di solito inviano gli SVG con compressione gzip o Brotli, che riduce di nuovo il testo durante il trasferimento al browser. Ottimizzazione e compressione del server si sommano, perché i dati rimossi non devono nemmeno essere compressi.

Quando un SVG ottimizzato si rompe

• CSS o JavaScript non trovano più un elemento. Gli ottimizzatori accorciano o rimuovono ID e nomi di classe che all'interno del file sembrano inutilizzati. Se gli stili o gli script della tua pagina li usano, controlla il risultato prima di pubblicarlo.
• L'icona non si ridimensiona più. Un SVG ha bisogno dell'attributo viewBox per ridimensionarsi correttamente. Lo strumento lo conserva, quindi verifica se l'originale lo aveva; un SVG con solo larghezza e altezza fisse non si è mai ridimensionato bene.
• Le forme minuscole appaiono distorte. Icone molto piccole disegnate su una tela grande possono risentire dell'arrotondamento. Con la precisione predefinita succede di rado.
• Il file è soprattutto una foto incorporata. Esporta la foto come JPG o WebP separato e collegalo, oppure converti l'intera grafica in bitmap.

Domande sul formato SVG

Pagine correlate

Le immagini bitmap sono gestite dal compressore di immagini. Per capire cosa viene eseguito in locale e perché, leggi come funziona.