Ottimizzatore SVG
Pulisci il markup vettoriale prima che venga inserito in un componente, un set di icone o un pacchetto di risorse statiche.
Impostazioni di ottimizzazione
Una precisione inferiore può ridurre ulteriormente il file, ma un arrotondamento aggressivo può distorcere i percorsi. Un valore pari a 2 o 3 è un buon valore predefinito.
Come funziona l'ottimizzazione SVG
Rimuovi i dati non di rendering
Le esportazioni di progetti spesso includono metadati, commenti, spazi dei nomi dell'editor e markup invisibile che aggiunge byte senza modificare l'immagine renderizzata.
Riduci la precisione dei path
Coordinate come 10.5432109 possono spesso essere arrotondate a 10.54 senza alcuna differenza visibile, soprattutto per le icone rese di piccole dimensioni.
Controlla prima della pubblicazione
L'ottimizzazione dovrebbe mantenere intatti viewBox, fill, stroke, etichette ARIA e ID importanti quando influiscono su rendering, stile, animazione o accessibilità.
Domande frequenti
Lo SVG ottimizzato apparirà sfocato?
No. SVG è basato su vettori, quindi l'ottimizzazione riduce il markup anziché rasterizzare l'immagine. L'unico rischio è arrotondare i valori del percorso in modo troppo aggressivo.
Perché uno SVG ottimizzato a volte può diventare più grande?
Se il file originale era già strettamente compresso o ottimizzato manualmente, potrebbe essere rimasto poco da rimuovere. In questi casi, l'output può essere di dimensioni simili o occasionalmente un po' più grande.
Supporta l'ottimizzazione batch?
Questa pagina è progettata per ispezione e messa a punto di file singoli. Per l'ottimizzazione batch, usa uno strumento di build come SVGO nella tua pipeline.
L'ottimizzazione di SVG può interrompere le animazioni o lo stile?
Sì, se un ottimizzatore rimuove ID, classi, metadati o precisione su cui si basa il tuo CSS o JavaScript. Visualizza in anteprima il risultato e mantieni gli attributi importanti quando SVG è interattivo.
Gli SVG decorativi dovrebbero includere etichette di accessibilità?
Gli SVG decorativi di solito possono essere nascosti dalla tecnologia assistiva. Le icone e le illustrazioni informative dovrebbero contenere titoli, etichette o testo circostante significativi.