Ottimizzatore e semplificatore SVG

Domande frequenti

Quanto si riduce il peso di un SVG?

Di solito del 40–80% sugli SVG esportati da Illustrator, del 40–70% sugli export di Figma, del 35–55% su Sketch e del 10–25% sugli SVG scritti a mano. Il guadagno più grosso viene dai metadati di Illustrator, che l'ottimizzatore toglie del tutto. Il risparmio esatto per il tuo file compare nei riquadri dei risultati.

L'ottimizzazione cambia l'aspetto del mio SVG?

No, con le impostazioni predefinite: le ottimizzazioni sono senza perdita e i pixel restano identici. L'anteprima affiancata mostra l'SVG ottimizzato accanto all'originale, così lo verifichi prima di scaricarlo. Se vedi una differenza, di solito è una precisione numerica troppo bassa che semplifica troppo un path: alzala.

Che differenza c'è tra ottimizzare e minificare un SVG?

La minificazione toglie solo spazi e accorcia il codice. L'ottimizzazione (quello che fa questo strumento) rimuove anche i metadati inutili, unisce i path, converte le forme nella versione più corta e arrotonda i numeri. In genere l'ottimizzazione fa risparmiare da 3 a 5 volte più della sola minificazione.

Toglie i metadati di Illustrator, Inkscape e Figma?

Sì, di default. Rimuove l'elemento <sodipodi:namedview> e gli attributi <inkscape:*> di Inkscape, il namespace xmlns:a di Illustrator, gli id numerici generati da Figma (a meno che tu non attivi Mantieni gli attributi id) e i commenti “Generator” o “Created with”. Il browser non li usa, ma possono valere il 30–50% di un SVG non ottimizzato.

Posso mantenere il viewBox o gli id?

Sì, sono due opzioni. Il viewBox è MANTENUTO di default perché toglierlo rompe il ridimensionamento con CSS e HTML, e fa risparmiare solo circa 25 byte: disattivalo solo per un SVG a dimensione fissa. Gli id sono RIMOSSI di default perché di solito sono rumore dei livelli di Figma; attiva Mantieni gli attributi id per gli sprite o quando CSS e JavaScript selezionano i nodi per id.

È come usare SVGO da riga di comando?

Sì. È SVGO v4, la stessa libreria usata dalla CLI, da webpack, da Vite e da svgr, che gira nel browser invece che in Node. Con le stesse impostazioni il risultato è identico byte per byte a `npx svgo input.svg`. La differenza è la comodità: niente installazione, niente file di configurazione e un'anteprima di quello che costa ogni impostazione.

Perché lo strumento mostra la dimensione con gzip?

Perché è quella che arriva davvero ai tuoi utenti: ogni server web invia gli SVG compressi con gzip o brotli. Il risparmio in byte grezzi può ingannare, perché SVGO toglie molto testo ripetitivo che gzip comprimeva già bene, quindi un 70% in meno sui byte grezzi può diventare un 45% dopo gzip. La cifra con gzip è la misura onesta di quanto hai guadagnato in caricamento.

Che precisione numerica devo usare?

3, il valore predefinito, va bene praticamente per tutto. Scendi a 2 per icone e grafica dell'interfaccia, dove di solito non si vede e fa risparmiare un altro 10–15%. Scendi a 1 o 0 solo per forme piccole e semplici, guardando l'anteprima: con una precisione bassa le curve iniziano ad appiattirsi. Le illustrazioni su tela grande (mappe, disegni dettagliati) possono richiedere 4 o più.

Posso recuperare l'SVG originale dopo l'ottimizzazione?

No. L'ottimizzazione è distruttiva per scelta: metadati rimossi, nodi uniti e coordinate arrotondate non si recuperano. Tieni l'originale sotto controllo di versione prima di ottimizzare.

Il mio SVG viene caricato da qualche parte?

No. SVGO gira come JavaScript nella scheda del browser e il file non viene mai inviato a un server; puoi verificarlo nella scheda Rete degli strumenti per sviluppatori mentre premi Ottimizza. Conta per loghi e grafiche coperti da NDA.

Posso ottimizzare solo i path di un SVG?

Sì, e i path sono la fonte principale di byte nella maggior parte delle icone. I plugin dedicati (convertPathData, mergePaths, removeUselessStrokeAndFill) riducono i decimali delle coordinate, uniscono i `<path>` consecutivi con lo stesso stile, trasformano i comandi assoluti (`M L`) in relativi (`m l`) quando sono più corti ed eliminano i sottopercorsi ridondanti. Sulle icone il risparmio tipico sui path è del 30–60% del peso totale.

Funziona con sprite SVG e set di icone?

Sì, ed è particolarmente utile perché il risparmio si somma su tante icone. Puoi ottimizzare le singole icone prima di assemblarle o direttamente lo sprite finito. Per gli sprite attiva Mantieni gli attributi id, così i selettori CSS e JavaScript che puntano agli id delle icone continuano a funzionare.

Semplifica l'SVG riducendo i punti dei path?

No. Non rimuove nodi. Un path che entra con 4.000 punti di ancoraggio esce con 4.000 punti. Quello che fa è far costare meno byte a ogni punto: le coordinate vengono arrotondate alla precisione scelta, i comandi assoluti diventano relativi, i segmenti `L` ridondanti diventano `H` e `V`, e i path consecutivi con lo stesso stile vengono uniti. Su un path generato da una vettorializzazione automatica è di solito una riduzione del 50–70% in byte con un risultato identico al pixel. Se ti servono davvero meno nodi, perché il path viene da una vettorializzazione ed è pesante da animare o modificare, quella è una ricostruzione della curva (Ramer–Douglas–Peucker), e per definizione cambia leggermente la forma. Usa Tracciato → Semplifica di Inkscape (Ctrl+L), la funzione Semplifica di Illustrator o la libreria `simplify-js`. Fallo prima, poi porta qui il risultato per il passaggio senza perdita: i due passaggi si completano.

Come semplifico un path SVG con questo strumento?

Abbassa il cursore della precisione: sui dati dei path è di gran lunga la leva più forte. I programmi di grafica esportano le coordinate con 6 decimali (`M 12.847362 4.019283`), circa mille volte più fini di quanto uno schermo possa mostrare. Scendere a 2 decimali dimezza di solito da solo i dati dei path. Come regola: precisione 3 va bene per tutto (è il valore predefinito, senza differenze visibili a qualsiasi zoom), 2 è giusta per icone e loghi mostrati sotto i 200 px circa, e 1 funziona per piccole icone monocromatiche ma può spostare le curve in modo visibile. Lascia attivo Multipass, così la pipeline si ripete finché il risultato smette di ridursi. L'anteprima si aggiorna mentre cambi il valore: scendi finché vedi una differenza, poi torna indietro di un passo.

È SVGO online?

Sì. Esegue il vero SVGO v4 nella scheda del browser invece che in Node: la stessa libreria che installeresti con `npm i -D svgo`, la stessa pipeline di plugin, lo stesso `preset-default`, lo stesso risultato per lo stesso input. Cambia solo dove gira il codice. Non c'è un server, quindi non viene caricato niente. Se in un progetto hai già un `svgo.config.js`, le impostazioni di questa pagina corrispondono ai plugin che configura.

Che differenza c'è con SVGOMG?

SVGOMG è lo strumento di Jake Archibald ed è il riferimento: se lo conosci e ti piace, continua a usarlo. Entrambi eseguono SVGO nel browser e danno risultati quasi identici, perché si affidano alla stessa libreria. Le differenze di questo strumento: mostra la dimensione con gzip accanto a quella grezza, che è il numero che viaggia davvero in rete e spesso racconta un'altra storia (un 40% in meno sui byte grezzi può diventare un 15% con gzip). E riduce la precisione a un solo cursore invece di una lista di plugin, più rapido quando è l'unica cosa che vuoi regolare. SVGOMG offre più interruttori per i singoli plugin. Nessuno dei due carica il tuo file.

Può riparare un SVG rotto?

Solo in senso stretto. SVGO deve prima leggere il file, quindi l'XML deve essere ben formato: un tag non chiuso o una `&` isolata lo fanno fallire invece di correggerlo. È un ottimizzatore, non uno strumento di recupero. Quello che pulisce in modo affidabile: la sporcizia degli editor che rompe la visualizzazione altrove (gruppi e clip path vuoti) e gli id duplicati che creano conflitti quando due SVG inline li condividono. Quello che non fa: ricostruire codice malformato, recuperare un file troncato o riconvertire in vettori un'immagine raster incorporata. Per un XML davvero rotto aprilo in un editor di testo e correggi prima l'errore: la console del browser di solito indica la riga esatta.