Utilia
Categorie ▾
Lingua: it ▾

Ottimizzatore SVG

Ottimizza e minifica file SVG online con SVGO, nel browser. Scegli una preimpostazione, confronta il risultato e guarda il risparmio, anche con gzip.

Plugin

Rimuovere il viewBox impedisce al disegno di adattarsi alle dimensioni, e accorciare o rimuovere gli ID rompe i riferimenti CSS, JavaScript, <use> o i link ad ancore che li usano. Mantieni la preimpostazione Sicura per gli SVG usati nel codice, negli sprite o nelle animazioni.

Come ottimizzare un SVG

  1. Trascina un file SVG nell’area di caricamento oppure cliccaci sopra per sceglierlo. Puoi anche incollare il markup nel riquadro Codice SVG.
  2. Scegli una Preimpostazione: Sicura, Bilanciata (quella predefinita) o Massima. L’elenco Plugin qui sotto mostra esattamente quali passaggi attiva ciascuna preimpostazione.
  3. Se serve, regola la Precisione decimale (da 0 a 8 cifre), Più passaggi e Formattazione leggibile (codice indentato) se vuoi un codice leggibile. Appena modifichi un plugin, la precisione o i passaggi, la preimpostazione diventa Personalizzata.
  4. Clicca su Ottimizza SVG. Un file trascinato viene ottimizzato subito, e una volta ottenuto un risultato, ogni modifica alle impostazioni rilancia l’ottimizzazione in automatico.
  5. Controlla i valori Peso originale, Peso ottimizzato, Risparmio e Con gzip, poi confronta i due disegni affiancati.
  6. Clicca su Copia per copiare il Codice SVG ottimizzato, oppure su Scarica l’SVG ottimizzato per salvarlo come nome.min.svg.

L’ottimizzazione è eseguita da SVGO 4, l’ottimizzatore SVG open source (MIT) di riferimento, usato nella maggior parte degli strumenti di build per il web. La sua versione per browser viene caricata la prima volta che clicchi, e funziona interamente sul tuo dispositivo: il tuo SVG non viene mai caricato.

Perché gli SVG dei programmi di grafica sono così pesanti

Un SVG esportato da Illustrator, Inkscape, Figma o Sketch contiene molto più del disegno. Gli editor aggiungono i propri namespace e attributi (nomi dei livelli, guide, impostazioni di esportazione), un blocco <metadata>, commenti come «Generator: Adobe Illustrator», coordinate con sei o più decimali, gruppi che contengono un solo elemento e colori prolissi come #ffffff. Niente di tutto questo cambia ciò che il browser disegna. SVGO lo elimina, arrotonda i numeri, riscrive i dati dei tracciati con comandi più corti, accorcia i colori e unisce o scompone gli elementi ridondanti. Per icone e illustrazioni esportate una riduzione del 40-60 % è frequente.

Preimpostazioni e plugin rischiosi

  • Sicura esegue la preimpostazione predefinita di SVGO ma mantiene gli ID, <desc>, i tracciati separati e le regole <style>, con 3 decimali e un solo passaggio. Usala per gli SVG richiamati da CSS o JavaScript, per gli sprite e le animazioni.
  • Bilanciata è la preimpostazione predefinita di SVGO, con 3 decimali e più passaggi. È adatta alla maggior parte delle icone e delle illustrazioni mostrate come immagini.
  • Massima aggiunge Rimuovi </strong>, <strong>Rimuovi script e attributi evento</strong>, <strong>Rimuovi width/height (mantieni viewBox)</strong> e <strong>Sostituisci xlink:href con href</strong>, con 2 decimali e più passaggi.</li> </ul> <p>Nessuna preimpostazione rimuove il viewBox. <strong>Rimuovi viewBox</strong> esiste solo per casi particolari: senza di esso, il disegno non si adatta più alla dimensione che gli dai nel CSS.</p> <p>Sappi cosa possono rompere gli altri plugin:</p> <ul> <li><strong>Accorcia e rimuovi gli ID inutilizzati</strong> rinomina ID come <code>#icon-home</code> in <code>a</code>. Qualsiasi selettore CSS, query JavaScript, riferimento sprite <code><use href="#…"></code>, ancora di pagina o animazione SMIL/CSS che punta al vecchio nome smette di funzionare.</li> <li><strong>Rimuovi <title></strong> e <strong>Rimuovi <desc></strong> eliminano il nome e la descrizione accessibili. Mantienili sulle icone e sui grafici significativi che i lettori di schermo devono annunciare.</li> <li>Una <strong>Precisione decimale</strong> bassa può deformare le icone piccole: le curve ondeggiano e i bordi si spostano. Controlla sempre il confronto visivo; 3 è un valore predefinito sicuro.</li> <li><strong>Unisci i tracciati</strong> fonde tracciati adiacenti in uno solo, quindi un effetto hover o un’animazione che puntava a un singolo tracciato perde il suo bersaglio.</li> </ul> <h2>Consigli</h2> <ul> <li>Conserva una copia master non ottimizzata da modificare; tratta il <code>.min.svg</code> come codice compilato.</li> <li>Attiva gzip o brotli sul server: i formati di testo come l’SVG si comprimono benissimo, e il valore <strong>Con gzip</strong> mostra quanto scaricano davvero i visitatori (visibile se il tuo browser supporta <code>CompressionStream</code>).</li> <li>Un SVG inline può essere stilizzato con il CSS e animato, ma non viene memorizzato nella cache separatamente; un SVG in <code><img></code> viene messo in cache ma non può essere stilizzato dalla pagina.</li> </ul></div> <section class="mt-10" aria-labelledby="faq"> <h2 id="faq" class="text-2xl font-semibold">Domande frequenti</h2> <div class="mt-4 divide-y divide-line rounded-xl border border-line bg-surface"> <details class="faq group"> <summary>Il mio SVG viene caricato su un server?</summary> <div class="prose px-5 pb-5"><p>No. SVGO funziona nel browser. L’unico download è il codice dell’ottimizzatore, la prima volta che ottimizzi.</p></div> </details> <details class="faq group"> <summary>Perché l'anteprima viene mostrata come immagini?</summary> <div class="prose px-5 pb-5"><p>L’SVG è un formato di documento che può contenere JavaScript e caricare file esterni. Entrambe le anteprime vengono visualizzate come <code><img></code> da URL blob locali, e in questa modalità i browser non eseguono mai script né scaricano risorse esterne, quindi visualizzare qui un SVG non affidabile è sicuro. Il codice ottimizzato, invece, contiene ancora gli eventuali script, a meno che non sia attivo <strong>Rimuovi script e attributi evento</strong> (lo è in <strong>Massima</strong>).</p></div> </details> <details class="faq group"> <summary>Il mio SVG ottimizzato non si ridimensiona più. Cos'è successo?</summary> <div class="prose px-5 pb-5"><p>Probabilmente il viewBox è stato rimosso, da <strong>Rimuovi viewBox</strong> o in precedenza da un altro strumento. Ottimizza di nuovo l’originale con quel plugin disattivato.</p></div> </details> <details class="faq group"> <summary>Perché il mio sprite di icone o la mia animazione hanno smesso di funzionare?</summary> <div class="prose px-5 pb-5"><p><strong>Accorcia e rimuovi gli ID inutilizzati</strong> o <strong>Unisci i tracciati</strong> hanno modificato gli elementi a cui fa riferimento il tuo codice. Usa la preimpostazione <strong>Sicura</strong>, che li mantiene entrambi.</p></div> </details> <details class="faq group"> <summary>Il file ottimizzato non è più piccolo. Perché?</summary> <div class="prose px-5 pb-5"><p>Probabilmente l’SVG è già minificato. Prova <strong>Massima</strong> o una <strong>Precisione decimale</strong> più bassa, e disattiva <strong>Formattazione leggibile (codice indentato)</strong>.</p></div> </details> </div> </section> <section class="mt-10" aria-labelledby="related"> <h2 id="related" class="text-2xl font-semibold">Strumenti correlati</h2> <ul class="card-grid mt-4"><li><a class="card" href="/it/convertire-svg-in-png/"> <span class="card-title">Da SVG a PNG</span> <span class="card-text">Converti SVG in PNG, JPG o WebP nel browser a qualsiasi larghezza, altezza, scala o DPI, con sfondo trasparente o colorato. Più file e ZIP, senza upload.</span> </a></li> <li><a class="card" href="/it/immagine-in-svg/"> <span class="card-title">Vettorizzare un'immagine in SVG</span> <span class="card-text">Converti un logo o un disegno PNG o JPG in tracciati vettoriali SVG nel browser. Preimpostazioni, numero di colori, anteprima sicura e download, senza upload.</span> </a></li> <li><a class="card" href="/it/comprimere-immagini/"> <span class="card-title">Comprimere immagini</span> <span class="card-text">Comprimi immagini JPG, PNG e WebP online e riduci il peso delle foto con qualità regolabile e ridimensionamento, anche in blocco. Senza upload.</span> </a></li> <li><a class="card" href="/it/formattatore-css/"> <span class="card-title">Formattatore e minificatore CSS</span> <span class="card-text">Rendi leggibile il CSS disordinato con un'indentazione pulita o minificalo con csso, e confronta la dimensione prima e dopo. Funziona nel browser.</span> </a></li> </ul> </section> </article> <div class="hidden lg:block"> <div class="sticky top-24"><aside class="ad-slot ad-slot-sidebar" data-ad-slot="sidebar" aria-label="Pubblicità"><span class="ad-label">Pubblicità</span></aside> </div> </div> </div> </main> <footer class="mt-16 border-t border-line bg-surface"> <div class="mx-auto grid max-w-6xl gap-8 px-4 py-10 sm:grid-cols-3 text-sm"> <div> <p class="font-semibold">Utilia</p> <p class="mt-2 text-muted">Strumenti online gratuiti che funzionano nel tuo browser. I tuoi dati restano sul tuo dispositivo.</p> </div> <nav aria-label="Categorie"> <p class="font-semibold">Strumenti</p> <ul class="mt-2 space-y-1"><li><a class="link-muted" href="/it/strumenti-testo/">Strumenti per il testo</a></li><li><a class="link-muted" href="/it/strumenti-sviluppatori/">Strumenti per sviluppatori</a></li><li><a class="link-muted" href="/it/web-seo-marketing/">Web, SEO e marketing</a></li><li><a class="link-muted" href="/it/colori-design/">Colori e design</a></li><li><a class="link-muted" href="/it/modifica-immagini/">Modifica immagini</a></li><li><a class="link-muted" href="/it/pdf-documenti/">PDF e documenti</a></li><li><a class="link-muted" href="/it/calcolatrici-matematiche/">Calcolatrici matematiche</a></li><li><a class="link-muted" href="/it/calcolatrici-finanziarie/">Calcolatrici finanziarie</a></li><li><a class="link-muted" href="/it/data-ora/">Data e ora</a></li><li><a class="link-muted" href="/it/convertitori-unita-di-misura/">Convertitori di unità</a></li><li><a class="link-muted" href="/it/calcolatrici-salute/">Salute e fitness</a></li><li><a class="link-muted" href="/it/casa-cucina-auto/">Casa, fai da te, cucina e auto</a></li><li><a class="link-muted" href="/it/generatori/">Generatori</a></li><li><a class="link-muted" href="/it/test-dispositivo/">Test del dispositivo e del browser</a></li><li><a class="link-muted" href="/it/audio-video/">Audio e video</a></li><li><a class="link-muted" href="/it/scuola-lingue/">Scuola e lingue</a></li><li><a class="link-muted" href="/it/giochi/">Giochi</a></li></ul> </nav> <nav aria-label="Informazioni"> <p class="font-semibold">Informazioni</p> <ul class="mt-2 space-y-1"> <li><a class="link-muted" href="/it/chi-siamo/">Chi siamo</a></li> <li><a class="link-muted" href="/it/contatti/">Contatti</a></li> <li><a class="link-muted" href="/it/privacy/">Informativa sulla privacy</a></li> <li><a class="link-muted" href="/it/condizioni-d-uso/">Condizioni d’uso</a></li> </ul> </nav> </div> <p class="border-t border-line py-4 text-center text-xs text-muted">© 2026 Utilia</p> </footer> </body> </html>