Vai al contenuto principale
Bethemesh
Immagini e grafica

Ottimizzatore SVG

Ottimizza i file SVG localmente rimuovendo commenti, metadati e markup specifico degli editor, comprimendo gli spazi e arrotondando i valori decimali.

  • Appunti
  • Esporta

Integra questo widget

Personalizza il risultato, controlla l’anteprima e copia il codice.

Anteprima

Tipo di codice di integrazione

Codice da copiare

Responsive e ridimensionato automaticamente da Bethemesh.

Sorgente SVG

Anteprima

Opzioni di ottimizzazione

Questo strumento ti è stato utile?

Come funziona questo strumento?

Un SVG esportato da Inkscape, Illustrator o Figma contiene spesso più testo che disegno: dichiarazione XML, commenti, metadati, attributi propri dell’editor e coordinate con cinque decimali. Questo ottimizzatore elimina il superfluo e arrotonda i numeri senza trasformare il disegno in un’immagine raster: il file resta vettoriale, leggibile e modificabile. Tutto avviene nel tuo browser.

Incolla il codice di un SVG o importa un file .svg. La dichiarazione XML e il DOCTYPE vengono sempre rimossi; un commento prima del tag svg, frequente negli editor, è accettato. Fai clic su Ottimizza SVG: compaiono il risultato, l’anteprima e tre valori, dimensione iniziale, dimensione ottimizzata e risparmio in byte e in percentuale.

Quattro opzioni sono attive per impostazione predefinita: rimuovere i commenti, rimuovere i blocchi metadata, rimuovere i dati di Inkscape e Sodipodi (attributi inkscape:, sodipodi: e i loro spazi dei nomi) e ridurre gli spazi tra i tag. Una quinta, disattivata per impostazione predefinita, toglie width e height dal tag svg radice quando esiste un viewBox; rettangoli e immagini interni mantengono i propri.

La precisione decimale, da 0 a 8 cifre (3 predefinito), arrotonda i numeri nei valori degli attributi: tracciati, coordinate, viewBox, trasformazioni. Gli zeri inutili spariscono (8.00000 diventa 8, 0.5 diventa .5). Identificatori, classi, link e testo visibile non vengono modificati. Copia il codice o scarica optimized.svg.

Come usare questo strumento

  1. Aggiungi l’SVG

    Incolla il codice o importa un file .svg completo.

  2. Imposta le opzioni

    Mantieni i valori predefiniti o regola la precisione decimale.

  3. Verifica ed esporta

    Controlla anteprima e risparmio, poi copia o scarica il risultato.

Calcolo del risparmio mostrato

Le dimensioni sono misurate in byte UTF-8, prima e dopo l’ottimizzazione.

Risparmio percentuale

g = (o − n) ÷ o × 100

Per l’icona Inkscape: (365 − 148) ÷ 365 × 100 = 59,5 %.

g
risparmio in percentuale
o
dimensione iniziale in byte
n
dimensione ottimizzata in byte

Casi d’uso

Icone di un sito

Alleggerisci le icone esportate da un editor prima di inserirle nell’HTML o in uno sprite.

SVG inline nel codice

Ottieni un markup compatto e pulito da incollare in un componente o in un’e-mail.

Logo per una Data URI

Riduci l’SVG prima di codificarlo in Base64 in un foglio di stile.

Esempi

Icona esportata da Inkscape

Impostazioni predefinite. Il disegno è identico: spariscono solo il testo inutile e i decimali oltre il terzo.

Input

Dichiarazione XML, commento, metadata, attributi inkscape:, tracciato M12.34567 8.00000 L35.65433 8.00000 L24.00000 40.12345 Z — 365 byte

Risultato

<path d="M12.346 8 L35.654 8 L24 40.123 Z" …> — 148 byte, 217 byte risparmiati (59,5 %)

Precisione ridotta a 1

Uno scarto di 0,05 unità è invisibile su un’icona di 48 unità, ma può deformare una planimetria o una mappa dettagliata: controlla l’anteprima.

Input

La stessa icona 48 × 48, precisione 1

Risultato

M12.3 8 L35.7 8 L24 40.1 Z — 142 byte (61,1 %)

Consigli e buone pratiche

  • Mantieni il viewBox: è ciò che permette all’SVG di adattarsi a qualsiasi dimensione.
  • Rimuovi width e height solo se la dimensione è fissata dal CSS, altrimenti l’immagine può comparire al 100 % della larghezza.
  • Per un’icona bastano di solito 1 o 2 decimali; conservane 3 o più per un disegno molto dettagliato.
  • Conserva il file sorgente dell’editor: i dati rimossi (livelli, guide) non si recuperano dall’SVG ottimizzato.

Fonti e riferimenti

Domande frequenti

Il rendering cambia?

Non con le opzioni predefinite su un disegno comune. Una precisione molto bassa può spostare leggermente alcuni punti: confronta con l’anteprima.

Colori e identificatori vengono modificati?

No. Colori esadecimali, id, class e link restano invariati, come il testo dei tag text.

I dati di Illustrator o Figma vengono rimossi?

Commenti e metadata sì. Gli attributi proprietari rimossi sono quelli di Inkscape e Sodipodi; quelli di altri editor restano.

Lo strumento unisce i tracciati o semplifica le forme?

No. Pulisce il codice e arrotonda i numeri, senza riscrivere la geometria come farebbe SVGO.

Il file resta modificabile?

Sì, resta un SVG testuale che qualsiasi editor vettoriale o di codice può aprire.

Il mio SVG viene caricato su un server?

No. L’ottimizzazione è eseguita dal tuo browser.

Strumenti correlati

Continua con questi strumenti

Strumenti simili o complementari a questo.

Strumenti simili

Convertire SVG

Converti file SVG in PNG, JPEG o WebP con anteprima e impostazioni di uscita.

Immagini e graficaUsa questo strumento

Generatore di favicon

Crea un favicon.ico e le icone PNG di un sito (da 16 a 512 px) a partire da un’immagine, nel browser.

Immagini e graficaUsa questo strumento

Leggi anche

GuidaFormatiPrincipiante

SVG: capire il formato vettoriale

Scopri come un file SVG descrive forme, usa viewBox e si integra in una pagina Web, con buone pratiche responsive, accessibilità e sicurezza.

31 agosto 20264 min