Perché gli SVG esportati da Figma o Illustrator sono così pesanti?

Gli editor aggiungono informazioni utili a loro ma non al browser: nomi dei livelli come ID, metadati, commenti e coordinate con molti decimali. Su un'icona semplice questa zavorra può pesare più del disegno stesso.

L'ottimizzazione fa perdere qualità?

Il livello Sicuro non tocca la geometria. Bilanciato e Aggressivo arrotondano le coordinate: con 2 decimali la differenza di solito non si vede, con 1 può notarsi su curve molto fini. Il cursore di confronto serve proprio a verificarlo.

Bisogna rimuovere il viewBox per ottimizzare un SVG?

No: il `viewBox` è ciò che permette all'SVG di scalare correttamente. Questo strumento non lo rimuove mai; con l'arrotondamento attivo ne riduce solo i decimali.

Che differenza c'è con SVGO?

SVGO è la libreria Node.js di riferimento, con decine di plugin che riscrivono anche i comandi dei path e ripuliscono le ` `. Questo strumento applica le pulizie più comuni senza installare nulla; per un'ottimizzazione spinta su molti file conviene SVGO in locale.

È sicuro ottimizzare un logo riservato?

Sì. Il file viene letto ed elaborato nel browser e non viene inviato a nessun server, quindi puoi lavorare anche su grafiche non ancora pubblicate.

Ottimizzatore SVG Online

Ottimizzatore SVG gratuito — rimuovi metadati dell'editor, commenti e riduci la precisione dei percorsi da esportazioni Figma e Illustrator. 100% nel browser.

Aggiornato maggio 2026

Revisionato da Rafael Duarte

Trascina qui il tuo file SVG

oppure fai clic per sfogliare

SUPPORTA .SVG · .XML

oppure incolla il codice qui sotto

Livello di ottimizzazione

Opzioni di pulizia

Rimuovi commenti Rimuovi metadati Rimuovi ID non usati Minifica i path

Formatta codice

Output indentato e leggibile

Precisione dei path

2 dec.

Una precisione minore produce file più leggeri, ma può deformare le forme complesse.

CONSIGLIO PRO

Per i loghi usa sempre 'Bilanciato'. 'Aggressivo' a volte unisce livelli che hanno bisogno di ID separati per le animazioni.

I tuoi file SVG non vengono mai caricati. Tutta l’ottimizzazione avviene interamente nel tuo browser.

File più leggeri

Rimuove metadati dell’editor, commenti ed elementi ridondanti senza cambiare la resa visiva.

Preset configurabili

Scegli l’ottimizzazione Sicura, Bilanciata o Aggressiva, oppure regola ogni opzione a mano.

100% privato

Nessun caricamento su server. I tuoi file SVG non lasciano mai il tuo dispositivo.

Come ottimizzare un SVG online

Dall'esportazione dell'editor a un file pronto per il web

1. Carica o incolla l'SVG

Trascina un file .svg nell'area di caricamento oppure incolla il codice: l'ottimizzazione parte subito.

2. Scegli il livello

Sicuro, Bilanciato o Aggressivo, oppure attiva e disattiva le singole opzioni di pulizia e regola la precisione delle coordinate.

3. Confronta prima e dopo

Controlla l'anteprima e il cursore di confronto, anche a schermo intero, insieme al peso originale, al peso ottimizzato e alla percentuale di riduzione.

4. Copia o esporta

Copia il codice ottimizzato oppure scarica il file: se l'hai caricato da disco, mantiene il nome originale con il suffisso -optimized.svg.

Cosa rimuove l'ottimizzatore SVG

Pulizia del codice senza cambiare il disegno

Metadati dell'editor

Elimina dichiarazione XML, DOCTYPE, blocchi <metadata>, <title> e <desc>, l'attributo version e le dichiarazioni di namespace di Figma, Sketch, Inkscape e simili.

Commenti e ID inutilizzati

Rimuove i commenti e gli id che nessun url(#…) o href="#…" richiama, come i nomi di livello esportati dai programmi di grafica.

Coordinate arrotondate

Riduce i decimali in d, viewBox, transform e negli attributi di posizione: M15.123456 32.678901 diventa M15.12 32.68 con 2 decimali.

Gruppi vuoti

Toglie i <g> rimasti senza contenuto dopo la pulizia, un residuo frequente delle esportazioni a livelli.

Codice compatto o leggibile

Di default spazi e a capo superflui vengono eliminati; con "Prettify" ottieni invece codice indentato, comodo per il debug.

Tutto nel browser

Il file non viene caricato su alcun server: anche loghi non ancora pubblicati restano sul tuo dispositivo.

Livelli di ottimizzazione e precisione

Cosa cambia passando da un livello all'altro

Impostazione

Effetto

Sicuro

Rimuove commenti e metadati, mantiene tutti gli ID e le coordinate originali

Bilanciato (predefinito)

In più rimuove gli ID non referenziati e arrotonda le coordinate a 2 decimali

Aggressivo

Come Bilanciato, ma con 1 solo decimale: file più leggero, rischio di piccole deformazioni

d="M15.123456 32.678901" con 2 decimali

d="M15.12 32.68"

viewBox="0 0 24.000 24.000"

viewBox="0 0 24 24" (il viewBox viene arrotondato, mai rimosso)

Quando ottimizzare un SVG

Gli scenari più frequenti

Siti più veloci

Icone e loghi più leggeri riducono il peso della pagina, soprattutto quando l'SVG è inserito direttamente nell'HTML.

Ripulire un'esportazione da Figma o Illustrator

Togli commenti, metadati e nomi di livello che l'editor aggiunge e che al browser non servono.

Icone per componenti React o Vue

Un SVG senza ID superflui e senza metadati è più semplice da incollare in un componente e non crea conflitti di ID nella pagina.

Librerie di icone

Uniforma la precisione delle coordinate di un set di icone senza installare SVGO o configurare una pipeline.

Controllo visivo prima della pubblicazione

Il cursore prima/dopo a schermo intero mostra se l'arrotondamento ha toccato curve o dettagli fini.

Errori comuni

Perdere ID usati da CSS o JavaScript

Lo strumento conserva gli ID richiamati da url(#…), href e animazioni, ma non vede quelli usati in un foglio di stile o in uno script. Se l'SVG è animato o manipolato via codice, usa il livello Sicuro.

Ridurre troppo la precisione

Con 1 decimale o meno, curve complesse e illustrazioni dettagliate possono deformarsi. Per loghi e illustrazioni resta su 2 o 3 decimali e controlla sempre il confronto.

Togliere il titolo a un'icona che deve essere accessibile

"Rimuovi metadati" elimina anche <title> e <desc>, che gli screen reader usano come descrizione. Per le icone con significato, disattiva l'opzione o aggiungi un aria-label.

Attivare Prettify e aspettarsi un file più piccolo

Prettify aggiunge rientri e a capo per la lettura: il file cresce e la riduzione può diventare negativa. Disattivalo prima di esportare per la produzione.

Perché usare questo ottimizzatore SVG

Ogni opzione si attiva e disattiva singolarmente e il risultato si aggiorna subito, con il peso prima e dopo e un confronto visivo a cursore. Capisci cosa hai guadagnato e se il disegno è rimasto identico prima di pubblicare.

Non serve installare SVGO né Node.js e non c'è registrazione: il file non lascia il browser, quindi puoi ottimizzare anche loghi di clienti o grafiche riservate.

Domande frequenti

Si rimuove ciò che il browser non usa: metadati dell'editor, commenti, ID inutilizzati, spazi superflui e decimali in eccesso nelle coordinate. Con il livello Bilanciato lo strumento fa tutto questo in un passaggio e mostra subito la percentuale di riduzione.

Riferimenti

SVGO su GitHub

Il progetto open source (in inglese) di riferimento per l'ottimizzazione degli SVG da riga di comando.

MDN — attributo viewBox

Come funziona il viewBox e perché è essenziale per la scalabilità (in inglese).

Wikipedia — Scalable Vector Graphics

Panoramica in italiano del formato SVG, della sua storia e degli standard W3C.