Ottimizzatore SVG

Incolla o rilascia un SVG e riducilo con SVGO. Tutto rimane nel tuo browser.

Come funziona Ottimizzatore SVG

Ottimizzatore SVG esegue SVGO (SVG Optimizer) in un Web Worker all'interno del browser per minificare e pulire i file SVG senza caricarli. SVGO applica un insieme configurabile di plugin che rimuovono i commenti, comprimono gli spazi bianchi, uniscono percorsi identici, convertono le forme nella loro rappresentazione più compatta e rimuovono gli attributi che non hanno effetto visivo. Il risultato è un SVG più piccolo che si renderizza in modo identico all'originale.

I file SVG prodotti da strumenti di design come Figma, Illustrator o Inkscape contengono spesso un overhead significativo: metadati specifici dell'editor, gruppi vuoti, attributi di trasformazione ridondanti e dichiarazioni di spazio dei nomi di cui nessun browser ha bisogno. Il set di plugin predefinito di SVGO rimuove questo overhead in modo affidabile. Il file ottimizzato viene proposto come download e viene mostrata la riduzione percentuale delle dimensioni in modo che tu possa confermare che l'ottimizzazione valesse la pena.

Scritto da Bastien Sulyan

Come usare Ottimizzatore SVG, passo dopo passo

Trascina il file SVG nell'area di caricamento o fai clic per sfogliarla.
Il Web Worker SVGO esegue l'ottimizzazione immediatamente con il set di plugin predefinito.
Visualizza la riduzione percentuale e le dimensioni originale e ottimizzata del file.
Fai clic su Scarica per salvare l'SVG ottimizzato sul dispositivo.
Se plugin specifici causano problemi di rendering, regola la configurazione del plugin e riesegui l'ottimizzazione.

Casi d'uso comuni

Uno sviluppatore front-end ottimizza le icone esportate da Figma prima di includerle in un pipeline di risorse di produzione, riducendo ogni icona da 4 KB a meno di 1 KB.
Un web designer pulisce le illustrazioni SVG esportate da Illustrator che contengono livelli di metadati dell'editor invisibili nel browser ma che appesantiscono il file.
Uno sviluppatore che crea un font di icone da glifi SVG si assicura che ogni SVG sorgente sia pulito e strutturato in modo coerente prima della fase di creazione del font.
Un ingegnere delle prestazioni verifica gli SVG inline in HTML e sostituisce ogni originale ridondante con una versione ottimizzata da SVGO per migliorare il peso della pagina.

Domande frequenti

SVGO cambierà l'aspetto del mio SVG?

I plugin predefiniti di SVGO sono scelti per essere visivamente senza perdita: l'SVG ottimizzato si renderizza in modo identico all'originale in tutti i browser standard. Alcuni plugin aggressivi (come quelli che arrotondano le coordinate del percorso in modo molto pesante) possono introdurre lievi differenze di rendering. Se noti una modifica visiva, confronta i file originale e ottimizzato in un browser e disabilita il plugin specifico che causa il problema.

Il file SVG viene inviato a un server per l'ottimizzazione?

No. SVGO viene eseguito in un Web Worker all'interno della scheda del browser. Il testo SVG viene letto dal disco locale, elaborato nella memoria JavaScript e l'output viene restituito alla pagina per il download. Il contenuto del file non lascia il dispositivo.

Quanto si ridurrà il mio SVG?

La riduzione dipende dalla sorgente. Gli SVG esportati da strumenti di design con metadati dell'editor si riducono comunemente del 30-70%. Gli SVG scritti a mano che sono già snelli potrebbero vedere solo una riduzione del 5-15%. Lo strumento mostra i conteggi esatti dei byte e la percentuale in modo che tu possa valutare ogni file individualmente.

L'ottimizzazione influisce sulle animazioni SVG o sul JavaScript all'interno del file?

La configurazione preserva gli elementi di animazione e gli attributi SMIL. Rimuove invece gli elementi script: lo strumento aggiunge il plugin removeScripts sopra il preset predefinito di SVGO, perché un SVG che stai per incorporare non dovrebbe contenere codice eseguibile. Alcuni plugin che ripuliscono gli attributi potrebbero interagire con le animazioni se l'animazione fa riferimento a quegli attributi tramite ID; verifica l'output renderizzato dopo aver ottimizzato file che usano animazioni complesse.

Posso ottimizzare più file SVG contemporaneamente?

La versione attuale elabora un file SVG alla volta. Trascina un file, scarica il risultato, poi trascina il file successivo. L'elaborazione in batch di più file in una singola sessione non è disponibile in questa versione.

Quale versione di SVGO usa lo strumento?

Lo strumento include SVGO in esecuzione in un Web Worker. La versione inclusa è indicata nelle informazioni sullo strumento. SVGO è mantenuto attivamente e l'API dei plugin è cambiata in modo significativo tra la v1, la v2 e la v3; lo strumento attuale usa il formato di plugin v3.

Strumenti correlati

Mantieni tutto locale, esplora gli strumenti complementari.

Tutti gli strumenti immagini