In questo articolo
Cos'e l'ottimizzazione SVG?
SVG (Scalable Vector Graphics) e un formato basato su XML per descrivere grafiche vettoriali bidimensionali. Sebbene gli SVG siano indipendenti dalla risoluzione e si ridimensionino perfettamente a qualsiasi dimensione, i file esportati da strumenti di design come Figma, Illustrator o Inkscape contengono spesso metadati non necessari, commenti, elementi nascosti e markup verboso che aumentano significativamente la dimensione del file senza influire sull'output visivo.
L'ottimizzazione SVG e il processo di riduzione della dimensione del file rimuovendo dati ridondanti e semplificando il markup SVG preservando la fedelta visiva. Un SVG ben ottimizzato puo essere il 30-80% piu piccolo della sua controparte non ottimizzata, risultando in caricamenti pagina piu veloci, minor consumo di banda e migliori punteggi Core Web Vitals.
Come funziona l'ottimizzazione SVG
Gli ottimizzatori SVG moderni come SVGO analizzano la struttura del documento SVG e applicano una serie di trasformazioni per ridurre la dimensione del file senza modificare l'output renderizzato.
- Rimozione metadati — elimina metadati dell'editor, commenti XML, elementi nascosti, gruppi vuoti e definizioni non utilizzate che gli strumenti di design incorporano ma i browser ignorano
- Ottimizzazione percorsi — semplifica i dati dei percorsi riducendo la precisione decimale, convertendo le coordinate assolute in relative e unendo i segmenti di percorso adiacenti dove possibile
- Pulizia attributi — rimuove i valori degli attributi predefiniti, abbrevia i valori dei colori (es. #ffffff in #fff), consolida le trasformazioni ridondanti e integra i piccoli blocchi di stile
Prova gratuitamente — nessuna registrazione richiesta
Ottimizza il tuo SVG →Quando ottimizzare gli SVG
L'ottimizzazione SVG e preziosa ovunque vengano utilizzate grafiche vettoriali sul web, specialmente quando le prestazioni e la velocita di caricamento contano.
- Prestazioni web — gli SVG ottimizzati si caricano piu velocemente e riducono il peso totale della pagina, migliorando direttamente il Largest Contentful Paint (LCP) e i Core Web Vitals complessivi
- Sistemi di icone — le librerie di icone con decine o centinaia di SVG beneficiano enormemente dell'ottimizzazione, poiche i risparmi cumulativi su molti piccoli file si sommano rapidamente
- Preparazione animazioni — il markup SVG pulito e minimale e piu facile da animare con CSS o JavaScript e produce animazioni piu fluide con minor complessita DOM
Domande frequenti
L'ottimizzazione SVG e lossy o lossless?
La maggior parte dell'ottimizzazione SVG e effettivamente lossless — l'output visivo rimane identico. Alcune operazioni come la riduzione della precisione decimale nei dati dei percorsi sono tecnicamente lossy a livello di sotto-pixel, ma la differenza e impercettibile all'occhio umano.
Quando non dovrei ottimizzare un SVG?
Evita l'ottimizzazione se l'SVG utilizza funzionalita che gli ottimizzatori potrebbero modificare incorrettamente, come filtri complessi, animazioni che dipendono da ID di elementi specifici, o SVG referenziati da CSS o JavaScript esterno. Confronta sempre visivamente l'output ottimizzato prima di usarlo in produzione.
Come si confrontano le prestazioni SVG con PNG?
Gli SVG sono tipicamente piu piccoli dei PNG per grafiche semplici come icone, loghi e illustrazioni, specialmente ad alte risoluzioni. Un singolo SVG sostituisce piu dimensioni PNG necessarie per diverse densita di schermo. Tuttavia, per immagini fotografiche complesse o illustrazioni molto dettagliate con migliaia di percorsi, i formati rasterizzati come WebP o AVIF possono essere piu efficienti.