Un ottimizzatore SVG veloce e privato
Il formato Scalable Vector Graphics (SVG) è lo standard per icone e illustrazioni web nitide e indipendenti dalla risoluzione. Tuttavia, quando esporti un SVG da un software di grafica, il file ottenuto è raramente ottimizzato per la produzione. Questo ottimizzatore SVG ti permette di ripulire all'istante le tue immagini vettoriali, eliminando il codice superfluo e riducendo le dimensioni del file senza sacrificare la qualità visiva.
Poiché questo strumento funziona interamente nel tuo browser, i tuoi file non vengono mai caricati su un server. Puoi comprimere file SVG in totale sicurezza, anche se contengono loghi proprietari, design di prodotti inediti o diagrammi riservati. L'elaborazione è immediata: avrai un riscontro in tempo reale sullo spazio risparmiato e un confronto visivo prima-e-dopo per assicurarti che la grafica resti perfettamente intatta.
Perché comprimere i file SVG
A differenza delle immagini raster (come JPEG o PNG) che memorizzano i dati dei pixel, i file SVG sono essenzialmente file di testo XML contenenti istruzioni matematiche per disegnare forme. Quando gli editor vettoriali generano questi file, spesso includono un'enorme quantità di dati superflui di cui i browser non hanno bisogno per renderizzare l'immagine.
Le cause più comuni che appesantiscono i file SVG includono:
- Metadati dell'editor: Tag e attributi specifici del software che ha creato il file, utili solo in fase di modifica.
- Commenti ed elementi vuoti: Note degli sviluppatori, gruppi vuoti (
<g>) e livelli nascosti che non contribuiscono in alcun modo alla resa visiva finale. - Precisione eccessiva: Coordinate dei tracciati con sei o più cifre decimali (es.
14.123456), che occupano byte inutili. - Attributi predefiniti: Stili e attributi che corrispondono al comportamento di default del browser e non necessitano di essere dichiarati esplicitamente.
Utilizzando un compressore SVG, elimini questo testo nascosto. Ridurre le dimensioni dei file SVG permette alle tue pagine web di caricarsi più velocemente, consumare meno banda e migliorare le prestazioni generali del sito e il posizionamento SEO.
Come minificare SVG online
Questo strumento offre diverse opzioni personalizzabili per darti un controllo granulare sul processo di ottimizzazione. A seconda di come intendi utilizzare la grafica finale, puoi regolare queste impostazioni per trovare il perfetto equilibrio tra le dimensioni del file e la leggibilità del codice.
Precisione decimale
I tracciati vettoriali vengono disegnati utilizzando delle coordinate. I software di grafica spesso esportano queste coordinate con estrema precisione, generando lunghe stringhe di numeri. Riducendo la precisione decimale (il numero di cifre dopo la virgola), puoi ridurre drasticamente il numero di caratteri del tuo file. Una precisione di 1 o 2 di solito è perfetta per le icone web. Se noti curve seghettate o forme alterate nell'anteprima visiva, ti basta spostare il cursore della precisione finché l'immagine non torna corretta.
Ottimizzazione multipass
L'ottimizzazione è spesso un processo a più livelli. Rimuovere un elemento superfluo potrebbe svuotare un elemento genitore, che a sua volta potrà essere rimosso. Attivando l'impostazione "Multipass", l'ottimizzatore eseguirà ripetutamente le routine di pulizia finché non sarà più possibile ridurre le dimensioni del file. Questo garantisce un file di output il più piccolo possibile.
Rimuovi dimensioni
Di default, molti SVG vengono esportati con attributi width e height fissi (es. width="500px"). Sebbene questo blocchi l'immagine a una dimensione specifica, rende difficile il web design responsivo. Spuntando "Rimuovi dimensioni", questi attributi vengono eliminati mantenendo intatto il viewBox. In questo modo l'SVG può scalare in modo fluido in base al CSS del contenitore genitore, rendendolo molto più facile da usare nei layout web moderni.
Pretty print
Se il tuo obiettivo è ottenere la dimensione minima assoluta del file, lascia questa opzione deselezionata. Lo strumento genererà un'unica e densa riga di codice. Tuttavia, se stai pulendo un SVG che intendi modificare manualmente, animare o incorporare direttamente in un documento HTML, spuntando "Pretty print" l'output verrà formattato con un'indentazione ordinata e ritorni a capo.
Best practice per la grafica vettoriale
Ottimizzare i tuoi SVG è solo un passo per creare un sito web veloce e accessibile. Quando lavori con la grafica vettoriale, considera come verrà implementata. Se incorpori l'SVG direttamente inline nel tuo HTML, minificare l'SVG è fondamentale per mantenere ridotte le dimensioni del documento HTML. Per ottenere le massime prestazioni, potresti anche passare l'intera pagina attraverso un Minificatore HTML o un Minificatore CSS.
Controlla sempre l'anteprima visiva dopo l'ottimizzazione. Sebbene la maggior parte degli SVG si comprima senza problemi, le illustrazioni molto complesse con sfumature intricate o tracciati di ritaglio precisi potrebbero richiedere una maggiore precisione dei float per mantenere l'aspetto originale. Il visualizzatore integrato prima-e-dopo ti permette di individuare facilmente eventuali modifiche indesiderate prima di scaricare il file minificato.
Infine, sebbene gli SVG siano perfetti per loghi, icone e illustrazioni piatte, non sono adatti per fotografie complesse. Se hai un SVG composto principalmente da immagini raster incorporate (come JPEG codificati in base64), l'ottimizzazione avrà scarso effetto. In questi casi, è meglio convertire interamente la grafica utilizzando un convertitore SVG in PNG.