Ottimizzatore SVG

Varia significativamente in base alla sorgente. I file SVG esportati da Adobe Illustrator includono tipicamente grandi quantità di metadata specifici per Illustrator, dati degli strati, riferimenti ai font e namespace XML che vengono rimossi. Le esportazioni di Inkscape trasportano i propri namespace dell'editor e commenti. Gli SVG di Figma sono generalmente più puliti. Risparmi tipici: 20-40% per SVG già puliti, 40-70% per esportazioni di Illustrator o Inkscape con metadata pesanti. Lo strumento mostra i conteggi esatti in byte prima e dopo, così saprai sempre il risultato.

Gli strumenti di design incorporano dati proprietari all'interno dei file SVG per preservare le proprie funzionalità di editing: Inkscape memorizza i nomi degli strati e le posizioni delle guide nei namespace sodipodi: e inkscape:, Illustrator incorpora dati nei namespace i: e dc:, e gli strumenti più vecchi includono metadata di Sketch o Adobe. Nulla di tutto questo è necessario per renderizzare l'SVG in un browser. La rimozione dei dati dell'editor produce spesso la riduzione di dimensioni più consistente, specialmente per file Illustrator complessi.

La precisione decimale controlla quanti cifre vengono mantenute dopo il punto decimale nei valori delle coordinate (ad esempio, d="M 10.3456789 20.1234567"). Ridurre da 6 a 2 trasforma questi in d="M 10.35 20.12", risparmiando byte a scapito di un leggero arrotondamento delle coordinate. Per icone e illustrazioni semplici, la precisione 2-3 è invisibile. Per disegni tecnici dettagliati o illustrazioni con curve fini, mantieni 4-5. Controlla l'anteprima allo zoom del 100% dopo aver ridotto la precisione per individuare eventuali artefatti di arrotondamento.

Gli elementi SVG hanno spesso ID prolissi generati dagli strumenti di design: id="rect_123456789" o id="Layer_1_xA0_Background". La pulizia degli ID sostituisce questi con nomi più brevi come id="a" o id="b", risparmiando byte su grandi file SVG con molti elementi referenziati. Questo è sicuro per i file SVG standalone. Se gli ID del tuo SVG sono riferiti da selettori CSS esterni o JavaScript nella tua pagina web (ad esempio, document.getElementById("myIcon")), disabilita questa opzione o aggiorna i tuoi riferimenti dopo l'ottimizzazione.

Sì. Clicca su "Oppure incolla codice SVG" per passare al pannello di input del codice e incolla direttamente il tuo markup SVG. Questo è utile quando hai un SVG incorporato in un file HTML, copiato da uno strumento di design o generato da una libreria di grafici. Dopo l'ottimizzazione, copia il risultato con il pulsante Copy Code e incollalo nuovamente dove necessario.

No. Lo strumento utilizza l'API DOMParser integrata nel browser per analizzare e pulire l'SVG interamente nella tua scheda del browser. Non avviene alcun caricamento di file, nessun server elabora il tuo SVG e nulla lascia la tua macchina. Questo rende sicuro ottimizzare asset SVG proprietari o sensibili come diagrammi di prodotti o asset di branding.

Ottimizza prima del commit. File SVG più piccoli significano operazioni git più veloci, dimensioni della repository ridotte e diff più puliti (poiché i metadata dell'editor cambiano spesso a ogni salvataggio in Illustrator). Un buon flusso di lavoro: esporta l'SVG dal tuo strumento di design, passalo attraverso questo ottimizzatore, rivedi l'anteprima, quindi committa la versione ottimizzata. Conserva il file sorgente originale in una cartella separata per le risorse di design se devi rieditarlo in seguito.