Ottimizzatore SVG

Cos'è Ottimizzatore SVG?

L'Ottimizzatore SVG è uno strumento gratuito nel browser per web designer, autori di icone e sviluppatori front-end che devono alleggerire SVG scritto a mano o esportato prima di pubblicarlo. Gli editor vettoriali aggiungono peso invisibile: commenti XML, blocchi di metadati, attributi di Inkscape/Sodipodi/Illustrator, decimali ridondanti, trasformazioni inutili, gruppi contenitori e ID e defs che nulla referenzia. Attiva ogni pulizia nelle Impostazioni, incolla il markup o trascina un file .svg, osserva i render Originale e Ottimizzato aggiornarsi affiancati e leggi le statistiche Prima, Dopo, Risparmiato, Gzip e Brotli. Copia il risultato o scaricalo come .min.svg. Usalo per alleggerire icone inline, fogli di sprite, loghi e illustrazioni.

Come usare Ottimizzatore SVG

1. Incolla il tuo SVG, o trascina/carica un file .svg — il markup riempie la casella di input.
2. Apri le Impostazioni e attiva esattamente le pulizie che vuoi: arrotondare le coordinate, rimuovere commenti, metadati e attributi dell'editor, gruppi vuoti, ID e defs inutilizzati, unire le trasformazioni, minimizzare gli stili inline, accorciare i colori hex, rimuovere i valori predefiniti e minimizzare gli spazi.
3. Se l'arrotondamento delle coordinate è attivo, imposta la precisione (0-5 decimali).
4. Confronta i render Originale e Ottimizzato affiancati per confermare che il disegno sia ancora corretto.
5. Leggi le statistiche Prima, Dopo, Risparmiato, Gzip e Brotli per vedere il guadagno reale di dimensione.
6. Copia l'SVG ottimizzato o scaricalo come file .min.svg.

Esempi

<svg xmlns="http://www.w3.org/2000/svg"><!-- Generator: Sketch --><title>icon</title><rect x="0" y="0" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><path d="M1.00000 2.49999 L10.333333 8"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><path d="M1 2.5 L10.33 8"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect fill="#FFFFFF" fill-opacity="1" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect fill="#fff" width="24" height="24"/></svg>

Domande frequenti

Cosa rimuove esattamente l'ottimizzatore?

Con le opzioni corrispondenti attive: commenti XML, elementi <metadata>, <title> e <desc>, attributi di namespace dell'editor (Inkscape, Sodipodi, Illustrator), gruppi vuoti, ID che nulla referenzia e <defs> non referenziati. Può anche arrotondare attributi numerici e dati di tracciato, unire trasformazioni inutili, minimizzare attributi style e CSS di <style>, accorciare i colori hex (#ffffff→#fff) e rimuovere attributi di presentazione predefiniti come fill-opacity="1".

Arrotondare le coordinate cambierà l'aspetto del mio SVG?

Arrotondare a bassa precisione può spostare i punti di una frazione minuscola di unità, di solito invisibile ma più piccola. Aumenta la precisione (fino a 5 decimali) per una geometria esatta, oppure disattiva l'arrotondamento per lasciare i numeri intatti.

Posso caricare un file e vedere l'anteprima del risultato?

Sì. Trascina o carica un file .svg (o incolla il markup) e i render Originale e Ottimizzato appaiono affiancati per individuare eventuali rotture. Poi copia l'output o scarica il .min.svg ottimizzato — nulla viene caricato; il file è letto localmente.

Cosa significano i valori di Gzip e Brotli?

La dimensione Gzip è misurata comprimendo davvero l'SVG ottimizzato nel tuo browser, quindi riflette i byte reali su una connessione con gzip. Il valore Brotli è una stima derivata da quella dimensione gzip (brotli di solito comprime il testo un po' di più); un vero encoder brotli è troppo pesante da includere, perciò è contrassegnato con una tilde.

Il mio SVG viene caricato da qualche parte?

No. Analisi, pulizia, misurazione delle dimensioni e serializzazione avvengono tutte localmente nel tuo browser con il DOMParser integrato. Nulla viene inviato a un server, quindi lo strumento funziona offline e la tua grafica resta privata.