Come ottimizzare un SVG e ridurre le dimensioni del file

In breve: apri l’Ottimizzatore SVG di Imgovo, aggiungi il tuo SVG (fino a 3 MB), lascia attiva l’opzione Rimuovi commenti e dati dell’editor, arrotonda i numeri se vuoi e confronta l’anteprima con l’originale. Poi scarica l’SVG o copia il codice. Il file viene elaborato nel tuo browser e non viene mai caricato.

Perché gli SVG diventano pesanti

Un logo semplice è fatto di poche righe di codice. Ma programmi di disegno come Inkscape, Sketch o Illustrator spesso ne aggiungono molte di più: commenti, impostazioni dell’editor, gruppi vuoti, attributi vuoti, spazi abbondanti e coordinate con molti decimali. Niente di tutto questo cambia ciò che vedi, ma va scaricato. In un sito con molte icone, si somma. File più leggeri aiutano anche le pagine a caricarsi più in fretta; per il quadro generale leggi Come ottimizzare le immagini del tuo sito web: dimensioni, formato e qualità.

Cosa fa l’ottimizzatore

• Rimuove commenti e dati dell’editor.
• Rimuove gruppi vuoti e attributi vuoti.
• Rimuove gli spazi superflui.
• Può arrotondare i numeri lunghi a 3, 2 o 1 decimale, oppure lasciarli come sono.
• Può mantenere titolo e descrizione, usati dagli screen reader.
• Mantiene il viewBox, le forme, le sfumature, i tracciati di ritaglio, le maschere e gli id usati da altre parti del file.

Passo dopo passo

1. Apri l’Ottimizzatore SVG e trascina un file SVG sulla pagina, clicca per sceglierlo o incollalo.
2. In Precisione dei numeri scegli Lascia i numeri così come sono, 3 decimali, 2 decimali o 1 decimale.
3. Lascia attivo Rimuovi commenti e dati dell’editor. Spunta Mantieni titolo e descrizione se il disegno è un contenuto che gli screen reader devono annunciare.
4. Guarda la sezione Risultato. Mostra le dimensioni prima e dopo e disegna originale e risultato uno accanto all’altro.
5. Leggi la riga di confronto. Imgovo disegna entrambi alla stessa dimensione e ti dice quanto differiscono, pixel per pixel.
6. Clicca su Scarica SVG, oppure su Copia il codice SVG per incollarlo nella tua pagina.

Conviene arrotondare i numeri?

Parti senza arrotondamento: il disegno resta uguale e i dati dell’editor vengono comunque rimossi. Poi prova con 3 decimali e, se l’anteprima è ancora buona, con 2. Arrotondare fa risparmiare più spazio, ma può cambiare leggermente linee sottili o piccoli dettagli. Se Imgovo segnala una differenza visibile, torna a una precisione più alta.

Cambia i colori senza aprire un editor

Imgovo elenca i colori pieni scritti direttamente nelle forme e negli stili. Scegli un nuovo colore per uno qualsiasi e ogni uso di quel colore esatto viene sostituito. È comodo per avere la stessa icona in più colori del marchio.

Le sfumature, i colori definiti da fogli di stile e la parola currentColor non vengono toccati. Il confronto pixel per pixel viene saltato quando cambi i colori, perché il risultato deve essere diverso.

Il testo in un SVG

Il testo viene disegnato con un font. Se il dispositivo di chi apre il file non lo ha, ne viene usato un altro e il disegno cambia. Imgovo mostra un avviso quando il file contiene testo. Convertire il testo in contorni nel tuo programma di disegno evita il problema.

Cosa viene rimosso per sicurezza

Un SVG può contenere script, pagine web incorporate, animazioni che possono cambiare i link, link ad altri siti e gestori di eventi. Imgovo li rimuove e un avviso sotto il file indica quanti elementi sono stati tolti. È un passaggio separato dal rendere il file più piccolo.

Dopo l’ottimizzazione

• Per trasformare l’SVG in un’immagine a pixel usa il Convertitore SVG.
• Per usarlo come icona del sito, aggiungilo al Generatore di favicon, che può includere un favicon.svg.
• Conserva sempre il file originale. I dati dell’editor non si possono recuperare dalla copia ottimizzata.

Privacy

L’SVG viene letto e riscritto nel tuo browser. Non viene caricato nulla.

Provalo ora

Apri l’Ottimizzatore SVG, aggiungi un SVG esportato dal tuo programma di disegno e guarda quanto si riduce.