Ottimizzatore SVG
-
Original Size
-
Optimized Size
-
Savings
Perché ottimizzare i file SVG?
I file SVG esportati da Illustrator, Figma o Inkscape contengono molti dati non necessari — commenti, metadati dell'editor, attributi ridondanti, numeri decimali troppo precisi e contenitori vuoti. Questi elementi gonfiano le dimensioni dei file del 30-70% senza alcun vantaggio visivo. Gli SVG ottimizzati si caricano più velocemente, consumano meno larghezza di banda e possono essere incorporati in modo più pulito nell'HTML.
8 strategie di ottimizzazione
Attiva/disattiva individualmente ogni passata di ottimizzazione per un controllo preciso di ciò che viene rimosso
Statistiche di riduzione dimensioni
Vedi la dimensione originale, la dimensione ottimizzata e la percentuale di risparmio dopo ogni ottimizzazione
Ottimizzazione senza perdita visiva
Tutte le ottimizzazioni preservano l'aspetto visivo dell'SVG — vengono rimossi solo i metadati invisibili
Come ottimizzare un SVG in 3 passi
Incolla il codice SVG
Copia il codice sorgente SVG dal tuo strumento di design o file e incollalo nel campo di input
Seleziona le ottimizzazioni
Spunta le opzioni di ottimizzazione da applicare — o usa i valori predefiniti per la riduzione massima
Copia e distribuisci
Copia l'SVG ottimizzato e sostituisci il tuo file originale, o incorporalo direttamente nell'HTML
Casi d'uso dell'ottimizzazione SVG
Librerie di icone
Ottimizza i set di icone esportati da Figma o Illustrator prima di raggrupparli in una libreria
Loghi
Pulisci i loghi SVG esportati per intestazioni di siti, favicon e risorse di brand
SVG animati
Riduci le dimensioni di base degli SVG animati che sono già più grandi a causa dei dati di animazione
PWA e mobile
SVG più piccoli riducono il consumo di dati mobili e migliorano i punteggi di performance su Lighthouse
Best practice per l'ottimizzazione SVG
✓ Attenzione alla rimozione degli ID nelle animazioni CSS
Se il tuo SVG usa animazioni CSS o JavaScript che puntano a ID di elementi, deseleziona 'Rimuovi ID' per non rompere le animazioni.
✓ Mantieni viewBox, rimuovi larghezza/altezza
Rimuovere gli attributi larghezza/altezza e mantenere viewBox rende gli SVG responsivi tramite CSS — l'approccio migliore per il design responsivo.
✓ Arrotonda i numeri a 2 decimali
Le coordinate del percorso con 5+ decimali sono impercettibili visivamente. Arrotondare a 2 decimali riduce le dimensioni del file senza alcuna differenza visiva.
✓ Automatizza con SVGO in CI/CD
Per i progetti grandi, integra SVGO nella tua pipeline di build per ottimizzare automaticamente tutti gli SVG. Usa questo strumento per verifiche manuali rapide.
❓ Domande frequenti
Di quanto può ridurre le dimensioni l'ottimizzazione SVG?
Tipicamente una riduzione del 30-70% a seconda della fonte. Gli SVG de Illustrator offrono spesso i maggiori risparmi. Le esportazioni di Figma sono già relativamente pulite. I maggiori guadagni derivano dalla rimozione dei metadati dell'editor, dei commenti e dall'arrotondamento della precisione decimale.
L'ottimizzazione cambia l'aspetto del mio SVG?
No — tutte le ottimizzazioni di questo strumento rimuovono solo dati invisibili (commenti, metadati, attributi ridondanti) o arrotondano numeri a una precisione impercettibile. Il risultato visivo è identico all'originale.
Perché rimuovere gli attributi larghezza e altezza?
I valori larghezza/altezza codificati impediscono agli SVG di ridimensionarsi in modo responsivo tramite CSS. Rimuovendoli e mantenendo solo viewBox, puoi controllare completamente le dimensioni dell'SVG tramite le proprietà CSS.
Qual è la differenza tra questo strumento e SVGO?
SVGO è uno strumento a riga di comando Node.js e lo standard per l'ottimizzazione SVG. Questo strumento offre una comoda interfaccia nel browser per le ottimizzazioni più comuni senza richiedere l'installazione di Node.js.