Ottimizzatore SVG
Riduci le dimensioni dei file SVG nel tuo browser. Rimuovi i metadati, comprimi i gruppi, arrotonda la precisione numerica e, opzionalmente, rimuovi width/height per il ridimensionamento responsive.
Cosa fa un ottimizzatore SVG?
I file SVG esportati dagli strumenti di design (Figma, Sketch, Illustrator, Inkscape) sono solitamente il 30-70% più grandi del necessario. Gli editor lasciano commenti, metadati firma, CSS ridondante, gruppi vuoti e una precisione numerica eccessiva che nessun occhio umano può percepire. Un ottimizzatore riscrive lo stesso disegno in un SVG più piccolo ed equivalente — identico al pixel per un renderer, ma con una frazione delle dimensioni del file. Tutto avviene localmente sul tuo dispositivo — il tuo SVG non viene mai caricato, mai copiato su un server, mai registrato. Questa garanzia di privacy è importante per i file di branding, le icone interne dei prodotti e qualsiasi SVG che non dovrebbe trovarsi su un server di terze parti. I valori predefiniti sono pensati per il lavoro a livello di icona: la precisione è impostata su 2 decimali, commenti e metadati dell'editor vengono rimossi, i gruppi inutili vengono compressi e il viewBox originale rimane intatto per il ridimensionamento responsive. Per illustrazioni con curve sottili aumenta la precisione a 3; per i set di icone responsive l'opzione rimuovi dimensioni elimina gli attributi width/height fissi così il CSS può ridimensionare le icone a qualsiasi dimensione tu imposti nel tuo foglio di stile.
Come ottimizzare un SVG
Incolla il markup SVG o trascina un file .svg sull'area di rilascio. Modifica le caselle di opzione — i valori predefiniti sono ragionevoli. Scegli la precisione numerica (2 va bene per la maggior parte delle icone), poi premi Ottimizza. L'anteprima prima/dopo ti permette di confermare che nulla sia cambiato visivamente. Copia il markup ottimizzato o scarica direttamente il file.
Consigli che fanno risparmiare più byte
Usa una sola palette di colori ed evita immagini raster incorporate — i PNG codificati in base64 dentro l'SVG vanificano il formato. Converti il testo in tracciati solo quando ti serve un glifo specifico; altrimenti mantieni i tag <text> così screen reader e motori di ricerca vedono il contenuto. Comprimi il file risultante con gzip/brotli sul tuo server: gli SVG ottimizzati si comprimono molto bene, raggiungendo spesso il 70% della dimensione post-ottimizzazione.
Cosa fa ciascuna opzione
| Opzione | Effetto | Note |
|---|---|---|
| Rimuovi commenti | Rimuove i blocchi lasciati dagli editor. | Quasi sempre sicuro. Disabilita solo se i commenti documentano il file. |
| Rimuovi metadati | Rimuove gli elementi | Sicuro — i metadati sono per lo strumento di design, non per il renderer. |
| Comprimi gruppi inutili | Rimuove gli elementi | Visivamente identico, spesso fa risparmiare il 5-15%. |
| Rimuovi width/height (SVG responsive) | Rimuove gli attributi width/height così il CSS dimensiona l'SVG. | Utile per i sistemi di icone; disattivato di default per mantenere il file autonomo. |
| Precisione numerica | Arrotonda i numeri dei tracciati a N decimali. | 2 è il default, 3 per illustrazioni fini, 1 solo per icone minuscole. |
Domande frequenti
L'ottimizzazione romperà il mio SVG?
Viene caricato qualcosa?
E gli sprite o i symbol SVG?
Quanto piccole dovrebbero essere le icone?
Devo mantenere xmlns e viewBox?
xmlns l'SVG non verrà visualizzato al di fuori di HTML5; senza viewBox perdi il ridimensionamento responsive. Entrambi gli attributi sono minuscoli e vale la pena mantenerli.