SVG Optimizer — Ottimizzatore SVG

Perché ottimizzare i file SVG

I file SVG esportati da strumenti di design come Illustrator, Figma, Sketch o Inkscape contengono molto più delle forme che vedi. Metadati dell'editor, commenti XML, livelli nascosti, valori predefiniti degli attributi, definizioni inutilizzate, decimali in eccesso e gruppi ridondanti possono facilmente occupare metà del file. Questo strumento esegue SVGO — lo stesso ottimizzatore usato dalla maggior parte delle pipeline di build e delle librerie di icone — per eliminare questo sovraccarico. Gli SVG più leggeri si caricano più velocemente, alleggeriscono le icone inline nel tuo HTML e mantengono ordinati i repository.

Il preset predefinito applica decine di trasformazioni sicure: rimuove la dichiarazione XML, i commenti, i metadati e i namespace degli editor, ripulisce gli ID, accorcia i colori, unisce i percorsi, converte le forme di base in percorsi compatti quando risultano più brevi e riscrive i dati dei percorsi con comandi relativi e meno cifre. Multipass ripete il processo finché non si trovano ulteriori risparmi, spesso guadagnando qualche punto percentuale in più.

Come scegliere le opzioni

Precision (precisione) determina quante cifre decimali vengono mantenute nei numeri; 2–3 vanno bene per le icone, mentre illustrazioni dettagliate o mappe possono richiederne di più. Remove <title> fa risparmiare byte ma elimina il nome accessibile, quindi mantienilo per le grafiche significative. Remove viewBox dovrebbe di norma restare disattivata, perché è proprio il viewBox a permettere a un SVG di scalare in modo responsive. Remove width/height è utile quando le dimensioni sono controllate dal CSS. Remove scripts & event handlers elimina gli elementi <script>, gli attributi on* e i link javascript:: una buona abitudine per gli SVG di provenienza sconosciuta. Pretty print indenta il risultato per renderlo più leggibile, al costo di qualche byte.

Anteprime private, locali e sicure

Tutta l'elaborazione avviene nel tuo browser; i file non vengono caricati. Entrambe le anteprime sono mostrate tramite un elemento immagine che carica un URL blob locale, e i browser non eseguono mai gli script contenuti negli SVG visualizzati in questo modo. Confronta sempre le due anteprime prima di usare il risultato: una precisione troppo aggressiva o la rimozione del viewBox possono cambiare il modo in cui la grafica viene resa. I badge delle dimensioni mostrano i byte risparmiati, così puoi bilanciare il peso del file e la fedeltà visiva.