File SVG troppo grande? 8 trucchi per comprimere e ottimizzare

Un SVG pesa spesso centinaia di KB o qualche MB, quasi sempre a causa di troppi punti di ancoraggio, percorsi ridondanti, metadati dell'editor e precisione decimale eccessiva. Gli 8 trucchi qui sotto sono ordinati "dall'origine alla consegna" e sono tutti applicabili nella pratica.

1. Livello dei percorsi: meno ancoraggi e percorsi uniti

Trucco 1: ridurre i punti di ancoraggio (semplificare il percorso)

Più punti di ancoragghi ci sono, più il file pesa e più lento è il rendering. Alzare un poco la levigatura in fase di conversione riduce gli ancoraggi alla fonte; per gli SVG che hai già, usa "Oggetto → Traccia → Semplifica" in Illustrator oppure "Percorso → Semplifica" (Ctrl+L) in Inkscape per eliminare gli ancoraggi ridondanti. Anche regolare levigatura e numero di colori nello strumento di conversione di PolySVG permette di bilanciare in tempo reale effetto e volume.

Trucco 2: unire percorsi e livelli

Unisci in un unico percorso i tracciati con lo stesso colore di riempimento, riducendo gli attributi ripetuti; appiattisci i raggruppamenti annidati inutili ed elimina livelli nascosti ed elementi vuoti. Nei programmi di grafica puoi usare l'Unione del localizzatore di tracciati o unire i livelli prima di esportare.

2. Contenuto del file: via i metadati, giù la precisione

Trucco 3: rimuovere i metadati dell'editor

Gli SVG esportati da Illustrator e Inkscape portano spesso namespace dell'editor, <metadata>, commenti e impostazioni di esportazione, che non influenzano il rendering e possono essere eliminati a mano o lasciati a SVGO. Attenzione a conservare <title> e <desc>, utili per l'accessibilità.

Trucco 4: ridurre la precisione decimale

Le coordinate dei tracciati hanno spesso 6-8 cifre decimali, mentre lo schermo ne richiede 1 o 2. Nella configurazione di SVGO abbassa la precisione numerica (floatPrecision) a 1-2: il volume scende in modo evidente e a occhio non c'è differenza. Sui simboli molto piccoli attenzione a non comprimere troppo le coordinate, per non deformare il disegno.

3. Automatizzazione: compressione con SVGO in un colpo

Trucco 5: ottimizzare in automatico con SVGO

SVGO è lo strumento di fatto per l'ottimizzazione degli SVG, con decine di plugin integrati: rimuovere commenti e metadati, unire i percorsi, ottimizzare i comandi di tracciato, ripulire i valori e così via. Uso base:

npx svgo input.svg -o output.svg

Su file tipici la riduzione è del 30%-70%. Attenzione a due punti: non rimuovere l'attributo viewBox, altrimenti il ridimensionamento si rompe; e per le icone che devono cambiare colore con i CSS mantieni l'ereditarietà di fill invece di fissare il colore.

Confronta prima e dopo con il peso del file e con la dimensione realmente trasferita negli strumenti per sviluppatori del browser, così confermi il guadagno; modifica una sola categoria di parametri alla volta, in modo da individuare facilmente quale passaggio ha introdotto un problema.

4. Struttura e riuso: simboli e controllo dei livelli di colore

Trucco 6: riusare la grafica con defs e use

Quando la stessa icona compare più volte nella pagina, definiscila una volta in <defs> e richiamala con <use>, oppure realizza uno sprite SVG: volume e numero di richieste scendono insieme.

Trucco 7: controllare i livelli di colore ed evitare bitmap incorporati

Riduci il numero di colori durante la vettorizzazione per diminuire i livelli; usa colori piatti invece di sfumature complesse. Evita soprattutto di incorporare bitmap in base64 dentro l'SVG: trasformerebbe il file vettoriale in un semplice contenitore di immagini e il volume esploderebbe. I percorsi spuri lasciati dalla conversione si possono cancellare con il clic nell'editor online.

5. Consegna: compressione in trasferimento e cache

Trucco 8: attivare gzip/Brotli e la cache

Poiché l'SVG è testo, con gzip/Brotli attivo sul server il volume trasferito scende in genere di un ulteriore 60%-80%; imposta intestazioni di cache lunghe per gli SVG statici. I simboli molto piccoli si possono incorporare direttamente nell'HTML, risparmiando una richiesta. Il principio è spiegato in I vantaggi di SVG; e, per controllare il volume già in fase di conversione, leggi I metodi per convertire un'immagine in SVG.

L'ordine conta: controlla ancoraggi e livelli di colore all'origine, ripulisci metadati e precisione nel file, poi passa da SVGO e infine attiva la compressione in trasferimento. Con le quattro livelli sovrapposti, il volume dell'SVG di solito si riduce di un ordine di grandezza.