Ottimizzatore SVG Online
Ottimizza file SVG riducendone le dimensioni fino al 90%. Rimuove metadati, commenti e ridondanze senza alterare il risultato visivo.
Cosa puoi fare
Ottimizza i tuoi SVG fino al 90% in meno
100% privato
L'ottimizzazione avviene nel browser. Il tuo SVG non viene mai caricato su alcun server.
Risultato visivo identico
Rimuove solo metadati e ridondanze: il rendering finale è visivamente uguale all'originale.
Compatibile con tutti gli editor
Funziona con SVG da Illustrator, Figma, Inkscape, Sketch e qualsiasi altro editor vettoriale.
Ottimizzazione istantanea
Nessun server da attendere. Il risultato è pronto in pochi secondi direttamente nel browser.
Come funziona
Tre passaggi, senza complicazioni
Carica il tuo file SVG
Trascina o seleziona il tuo file SVG. Funziona con SVG esportati da Illustrator, Inkscape, Figma, Sketch e altri editor vettoriali.
Scegli il livello di ottimizzazione
Seleziona tra ottimizzazione sicura (rimuove solo metadati e ridondanze chiare) e ottimizzazione aggressiva (semplifica anche path e trasformazioni per la massima riduzione). L'anteprima ti mostra il risultato prima di scaricare.
Scarica l'SVG ottimizzato
L'ottimizzazione avviene nel browser senza upload. Scarica il file ridotto, visivamente identico all'originale ma molto più leggero.
FAQ
Hai delle domande?
SVGO (l'ottimizzatore SVG open source alla base dello strumento) rimuove o comprime diverse categorie di dati non essenziali alla resa visiva. I metadati dell'editor: commenti XML, attributi xmlns inutilizzati, namespace non standard aggiunti da Illustrator o Inkscape (come sodipodi: e inkscape:), tag title e desc se non necessari. Ridondanze strutturali: gruppi vuoti, layer non visibili, definizioni defs non referenziate, attributi con valori default (come fill:black, stroke:none quando sono i default). Dati di percorso: semplificazione delle istruzioni path riducendo la precisione decimale delle coordinate (da 6 a 1-2 decimali quando la differenza visiva è sotto il pixel), ottimizzazione delle sequenze di comandi path.
Con le impostazioni sicure, il rischio è molto basso. Le trasformazioni conservative come la rimozione di commenti, metadata e whitespace non influenzano mai il rendering. Le ottimizzazioni più agressive, come la semplificazione dei path o il merging degli stili, possono in casi rari alterare il risultato visivo per differenze subpixel, o rompere SVG che vengono manipolati da JavaScript attraverso ID o classi rimosse. Prima di usare un SVG ottimizzato in produzione, verifica sempre l'anteprima visiva e, se l'SVG viene manipolato da script, testa con un browser.
La riduzione dipende dalla sorgente. SVG esportati da Adobe Illustrator sono notoriamente verbosi: includono metadati estesi, commenti di versione, namespace proprietari e definizioni di stile ridondanti. Una riduzione del 60-80% è comune per SVG da Illustrator. SVG da Figma e Sketch sono già più puliti alla sorgente; la riduzione tipica è del 20-40%. SVG scritti a mano o già ottimizzati si riducono poco. File di icone semplici (pochi path geometrici) possono scendere dal 50-80% facilmente.
Le animazioni CSS applicate tramite classi o ID sono sicure se le classi e gli ID a cui fanno riferimento non vengono rimossi durante l'ottimizzazione. SVGO include un elenco di protezioni per classi e ID referenziati. Le animazioni SMIL (Synchronized Multimedia Integration Language, il sistema di animazione nativo SVG con attributi animate, animateTransform, ecc.) sono generalmente preservate dalle ottimizzazioni sicure ma possono essere influenzate dall'ottimizzazione aggressiva che trasforma o fonde elementi. Verifica sempre le animazioni dopo l'ottimizzazione.
Sì, ma con alcune avvertenze. Se il testo SVG usa font di sistema o web font referenziati esternamente, l'ottimizzazione non tocca i testi. Se il testo è stato convertito in path (come spesso avviene nell'export da Illustrator per evitare problemi di font), le coordinate dei path vengono ottimizzate riducendo la precisione decimale. Se il SVG ha font embedded come base64 nel blocco style o defs, SVGO li preserva ma li include nel calcolo della dimensione. Testo SVG con caratteri speciali e internazionalizzazione (Unicode) è gestito correttamente.
No. Tutta l'ottimizzazione avviene localmente nel browser. Il tuo file non viene mai trasmesso a server remoti. Questo è importante per SVG che contengono informazioni proprietarie come loghi aziendali, icone di prodotto o illustrazioni commerciali.
Ottimizzare SVG: guida tecnica a SVGO, path compression e performance web
SVG (Scalable Vector Graphics) è un formato XML per la descrizione di grafica vettoriale bidimensionale, standardizzato dal W3C nella versione 1.1 nel 2011 e aggiornato in SVG 2 nel 2016. A differenza dei formati raster come PNG o JPEG, SVG descrive le figure geometricamente: linee, curve di Bezier, cerchi, poligoni e trasformazioni affini. Questo li rende indipendenti dalla risoluzione (perfetti per schermi Retina e display 4K) e manipolabili via CSS e JavaScript. Tuttavia, i file SVG prodotti da editor grafici contengono sistematicamente dati non necessari: metadati dell'applicazione (nome del software, versione, timestamp), namespace XML non standard (xmlns:sodipodi, xmlns:inkscape, xmlns:dc, xmlns:cc, xmlns:rdf), commenti XML, definizioni defs inutilizzate, e attributi con valori identici ai default CSS.
SVGO (SVG Optimizer) è il progetto open source di riferimento per l'ottimizzazione SVG, sviluppato originariamente da Kir Belevich nel 2012 e mantenuto dalla comunità. SVGO opera tramite una pipeline di plugin configurabili: ogni plugin è responsabile di un tipo specifico di ottimizzazione. I plugin principali includono removeDoctype (rimuove la dichiarazione DOCTYPE), removeXMLProcInst (rimuove l'istruzione di elaborazione XML), removeComments, removeMetadata (rimuove il blocco metadata dell'editor), removeEditorsNSData (rimuove tutti i namespace e attributi non standard), cleanupIds (abbrevia gli ID ridondanti), removeUselessDefs, minifyStyles (ottimizza il CSS inline), convertStyleToAttrs, mergePaths (unisce path adiacenti con lo stesso stile), convertShapeToPath (converte rect, circle, ecc. in path equivalenti per ulteriore compressione), e roundDecimals (riduce la precisione numerica delle coordinate).
Dal punto di vista delle performance web, l'ottimizzazione SVG ha un impatto diretto sui Core Web Vitals, le metriche di esperienza utente di Google. Un file SVG non ottimizzato da 50 KB usato come icona inline nel DOM aggiunge parsing time e aumenta la dimensione del documento HTML; l'equivalente ottimizzato a 8 KB riduce il blocking time del parser e migliora il First Contentful Paint (FCP). Per sprite SVG (un singolo file SVG contenente decine o centinaia di icone referenziate con use e href), la differenza tra versione non ottimizzata e ottimizzata può essere di alcune decine di KB, rilevante per il LCP (Largest Contentful Paint) su connessioni mobili lente. Google PageSpeed Insights e Lighthouse includono audit specifici per immagini non ottimizzate; i file SVG non minificati vengono flaggati come opportunità di ottimizzazione. Il formato SVG ha anche implicazioni per la sicurezza web: SVG incorpora JavaScript tramite tag script, il che lo rende potenzialmente vettore di XSS (Cross-Site Scripting) se servito con il MIME type sbagliato o su un dominio fidato. SVGO può rimuovere i tag script dal SVG come misura di sicurezza aggiuntiva.