Salta al contenuto principale

Opzioni ottimizzazione

Originale362 B
Ottimizzato187 B
Riduzione-48%

SVG Input

362 B

SVG Ottimizzato

187 B (-48%)
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><g id="layer1"><circle id="circle1" cx="50" cy="50" r="40" fill="#58a6ff" stroke="none" /></g></svg>

Preview SVG

Come utilizzare SVG Optimizer

1. Incolla o carica il tuo SVG

Incolla il codice SVG nell'editor oppure carica un file .svg con il pulsante di upload: parte già un SVG di esempio precompilato.

2. Scegli le ottimizzazioni da applicare

Attiva o disattiva rimozione commenti, metadata, gruppi vuoti, collapse whitespace, arrotondamento decimali, attributi default, minify ID ed elementi nascosti.

3. Leggi la riduzione di peso

Confronta la dimensione originale e quella ottimizzata in byte/KB e la percentuale di riduzione ottenuta, con anteprima visiva dell'SVG risultante.

4. Copia o scarica l'SVG ottimizzato

Copia il codice ottimizzato negli appunti oppure scaricalo direttamente come nuovo file .svg pronto per il tuo progetto.

Suggerimenti

  • Attiva "Minify ID" solo se il tuo SVG non viene referenziato da CSS esterno tramite quegli ID, per evitare di rompere stili collegati.
  • Riduci la precisione decimale a 1-2 cifre per icone semplici: ottieni una riduzione di peso significativa senza impatto visivo percepibile.
  • Verifica sempre l'anteprima dopo l'ottimizzazione prima di sostituire l'SVG originale nel tuo progetto, soprattutto se usi opzioni aggressive come "Rimuovi elementi nascosti".

Domande frequenti

Quali ottimizzazioni applica lo strumento?

Rimozione di commenti, metadata/title/desc, gruppi vuoti, collapse dei whitespace, arrotondamento dei decimali, rimozione attributi con valore di default, minify degli ID ed eliminazione elementi nascosti: ogni opzione è attivabile singolarmente.

L'output SVG è sicuro da incollare in una pagina web (rischio XSS)?

Sì: l'output viene sempre sanitizzato rimuovendo tag script, handler on* inline e href/src con schema javascript: o data:text/html, oltre a tag iframe e foreignObject, indipendentemente dalle opzioni di ottimizzazione scelte.

Come viene calcolata la percentuale di riduzione?

Confrontando la dimensione in byte dell'SVG originale con quella dell'SVG ottimizzato, con la formula (dimensione originale meno dimensione ottimizzata) diviso dimensione originale, moltiplicato per 100.

Posso caricare un file SVG invece di incollare il codice?

Sì, tramite il pulsante di upload file: il contenuto viene letto e inserito automaticamente nell'editor, pronto per l'ottimizzazione.

Cosa fa l'opzione "Minify ID"?

Sostituisce ogni id originale con un identificatore breve progressivo (es. i0, i1) aggiornando automaticamente tutti i riferimenti url(#id) e href="#id" corrispondenti, per evitare di rompere gradient e maschere.