Ottimizzatore SVG
Trascina i file qui o fai clic per selezionare
- Sicuro
- L’elaborazione avviene sul tuo dispositivo, quindi input/output non viene inviato da nessuna parte.
Spiegazione
Analizza la struttura dell’SVG e rimuove il markup superfluo finché il rendering non viene alterato. Espande gli stili, ottimizza le dimensioni, riduce gli attributi e semplifica i dati numerici e dei tracciati per diminuire efficacemente le dimensioni mantenendo la qualità visiva.
Cosa fa l’ottimizzazione
| Stili | Quando possibile, il CSS contenuto in <style> viene trasferito negli attributi style dei singoli elementi. Può poi essere convertito in attributi di presentazione come fill e stroke; gli elementi <style> rimasti vuoti e non più necessari vengono rimossi. |
|---|---|
| Dimensioni | Rimuove le dichiarazioni width e height da style, oltre agli attributi width e height dall’elemento radice <svg>. Il viewBox, necessario per la visualizzazione responsive, viene mantenuto. |
| Attributi | Rimuove gli attributi non necessari aggiunti da strumenti di progettazione come Figma, Adobe XD e Illustrator, ad esempio data-name. Anche id e class possono essere rimossi se non sono referenziati o diventano superflui dopo la fusione o conversione di elementi, ad esempio da <line> a <path>. |
| Riferimenti | Controlla gli attributi di riferimento come filter, clip-path e mask e li rimuove quando la destinazione referenziata non esiste. Le referenze valide che influiscono sull’aspetto vengono mantenute. |
| Numeri e tracciati | Confronta il rendering con diverse precisioni di arrotondamento (floatPrecision) e sceglie automaticamente la più leggera che riduce al minimo le differenze visive. Semplifica inoltre i dati dei tracciati, come l’attributo d di <path>, rimuove spazi e ridondanze inutili e applica multipass per ripetere l’ottimizzazione e ridurre al massimo le dimensioni. |
| Compatibilità | Per evitare problemi di rendering, viewBox viene mantenuto. Se l’SVG contiene elementi <text>, viene conservato anche xml:space, che controlla la gestione degli spazi; può essere rimosso quando non sono presenti elementi <text>. Negli SVG animati alcune ottimizzazioni vengono disattivate per sicurezza. Anche il CSS complesso difficile da incorporare può essere mantenuto per preservare l’aspetto originale. |
Note
La riduzione delle dimensioni e il risultato finale possono variare in base alla struttura e al markup dell’SVG. Gli stili difficili da espandere o incorporare automaticamente, come selettori complessi o media query, possono essere mantenuti per preservare il rendering.
Quando gli elementi vengono uniti o convertiti, ad esempio da <line> a <path>, gli attributi id e class degli elementi originali possono essere rimossi se diventano superflui a causa del cambiamento di struttura.
Gli attributi di riferimento come filter, clip-path e mask vengono rimossi automaticamente quando la destinazione non esiste, ad esempio in caso di riferimenti url(#...) interrotti, per mantenere coerente l’SVG.
Gli SVG con animazioni, come animazioni CSS o tag <animate>, possono essere ottimizzati, ma alcune operazioni vengono limitate perché il comportamento dell’animazione può alterarsi facilmente. Se l’SVG contiene script (JS), l’ottimizzazione può causare comportamenti imprevisti.