Ottimizzatore SVG

Come funziona

1. Incolla o carica un SVG: inserisci il markup SVG direttamente o carica un file .svg esportato da Illustrator, Figma o Sketch.
2. Configura le passate di ottimizzazione: scegli quali ottimizzazioni applicare, rimozione di commenti, eliminazione di metadati, semplificazione dei tracciati e normalizzazione del viewBox.
3. Ottimizza: lo strumento esegue le passate scelte e visualizza la percentuale di riduzione di dimensione.
4. Scarica o copia: salva il SVG ottimizzato o copia il markup per incollarlo nel tuo codice.

Perché ottimizzare i tuoi SVG?

I file SVG esportati dagli strumenti di design sono pieni di dati superflui, metadati di editor, dichiarazioni di stile inline con valori predefiniti, gruppi vuoti, attributi di trasformazione ridondanti e commenti. Questo surplus aumenta la dimensione senza cambiare nulla nel rendering. SVGO (l'ottimizzatore SVG standard del settore qui usato) può generalmente ridurre la dimensione del 50-80 % preservando un rendering pixel perfect. SVG più piccoli si caricano più velocemente, si integrano più rapidamente in HTML e riducono la banda, particolarmente importante per i sistemi di icone che caricano dozzine di SVG per pagina.

Ottimizzazioni applicate

• Commenti rimossi, commenti di generatore e di editor eliminati
• Metadati eliminati, elementi title, desc e XMP
• Gruppi vuoti uniti, elementi <g> di wrapping superflui rimossi
• Tracciati semplificati, comandi di percorso ridondanti uniti e accorciati
• Attributi puliti, valori predefiniti e attributi di presentazione rimossi
• ViewBox normalizzato, sistema di coordinate coerente

Breve storia di SVG e SVGO

Scalable Vector Graphics nacque dalla competizione tra due proposte W3C: Precision Graphics Markup Language (PGML) di Adobe, IBM, Netscape e Sun, e Vector Markup Language (VML) di Microsoft. Entrambi furono presentati nel 1998; il compromesso W3C divenne SVG, raccomandato come SVG 1.0 nel settembre 2001. Internet Explorer rifiutò notoriamente di spedire il supporto SVG fino a IE9 (2011), mentre Firefox, Safari e Opera lo supportarono dalla metà degli anni 2000. SVG 1.1 apparve nel 2003, con una Seconda Edizione nel 2011. SVG Tiny 1.2 mirò ai dispositivi mobili nel 2008. SVG 2 iniziò la stesura intorno al 2016 ma si bloccò; oggi rimane un Candidate Recommendation Draft (ultimo aggiornamento nel 2018), con i browser che spediscono pezzi individualmente. L'ottimizzazione arrivò più tardi. SVGO fu creato da Kir Belevich (svg-go) e pubblicato per la prima volta su GitHub nell'ottobre 2012, scritto in JavaScript. Divenne lo standard de facto, integrato in webpack-loader, Vite, Sketch, plugin di esportazione Figma, e l'interfaccia web SVGOMG di Jake Archibald (team Chrome) lanciata nel 2015. SVGO 3 (rilasciato nel 2023) ha modernizzato il codice. Questo strumento implementa un sottoinsieme sicuro dei plugin più impattanti di SVGO, eseguendosi interamente nel tuo browser.

Cosa fa davvero un ottimizzatore SVG

• Riduzione della precisione decimale. Illustrator esporta percorsi con 6 cifre decimali come M127.348293. Tre decimali sono visivamente identici per le dimensioni tipiche di icone; uno o due spesso bastano. SVGO usa 3 decimali di default tramite il plugin cleanupNumericValues. Minore precisione = file più piccolo.
• Collassare gruppi inutili. Gli strumenti di design avvolgono ogni operazione in elementi <g>; molti diventano vuoti dopo la semplificazione. Il plugin collapseGroups unisce i gruppi a figlio singolo nel loro genitore.
• Rimuovere i metadati. Illustrator marchia ogni esportazione con blocchi <metadata>...</metadata> contenenti pacchetti XMP, Inkscape con attributi namespace sodipodi, Figma con ID editor. Niente di tutto questo influisce sul rendering. removeMetadata, removeEditorsNSData e removeXMLProcInst gestiscono questi.
• Ottimizzazione dei comandi di percorso. Convertire coordinate assolute in relative (spesso più corte), unire segmenti di linea consecutivi (l 5,0 l 0,5 rimane a due; L 5,0 L 5,5 diventa v 5), rimuovere Z inutili dopo z. Il plugin convertPathData può risparmiare 30-50% sulle stringhe di percorso.
• Rimozione di attributi predefiniti. fill="black", stroke="none", stroke-width="1" sono predefiniti; SVGO li rimuove. Combinato con mergeStyles, questo spesso dimezza esportazioni con stili inline.
• Accorciamento dei colori. #ffffff → #fff; rgb(255,255,255) → #fff; colori nominati (aliceblue) → hex se più corto. Il plugin convertColors.
• Rimozione di ID non utilizzati. Gli ID generati dall'editor come id="path-7423" di solito non sono mai referenziati. cleanupIds di SVGO rimuove ID orfani e minimizza il resto a a, b, c...

Dove conta l'ottimizzazione SVG

• Sistemi di icone. Una pagina con 30 icone SVG da 2 KB ciascuna è 60 KB; ottimizzate a 800 byte ciascuna risparmia 36 KB. Heroicons, Lucide, Phosphor, Feather spediscono tutti SVG pre-ottimizzati; se li hai estratti da un file di design, devi farlo tu stesso.
• Loghi e asset di brand. I loghi consegnati ai clienti sono spesso 50-100 KB da Illustrator; ottimizzati sono 5-10 KB. Stessa fedeltà visiva, minore larghezza di banda, caricamento pagina più rapido. Il SVG del logo Wikipedia è sceso da 39 KB a 11 KB dopo un singolo passaggio di ottimizzazione.
• SVG inline in HTML. Quando metti SVG inline (nessuna richiesta HTTP extra), ogni byte del SVG gonfia il payload HTML che blocca il parser del browser. Un'icona di 200 byte vs 2 KB conta per i tempi di primo paint.
• Visualizzazione dati. D3.js, Observable, output SVG di ECharts e React-vis producono grandi SVG con migliaia di elementi. Un grafico a dispersione con 5.000 punti è facilmente 500 KB grezzo; ottimizzato può scendere a 150 KB rimanendo identico.
• Generazione di font di icone. Strumenti come IcoMoon, Fontello e Fontastic convertono SVG in font di icone. Pre-ottimizzare i SVG sorgente garantisce output font più puliti e file font più piccoli.
• Asset di stampa e PDF. Incorporare SVG in PDF (tramite strumenti web-to-PDF come Puppeteer, wkhtmltopdf) significa che il bloat SVG finisce nel PDF finale. Ottimizza prima.
• SVG sicuro per email. Molti client email (Outlook, alcune app Gmail) non renderizzano affatto SVG; per quelli che lo fanno (Apple Mail, Gmail web), un SVG inline più piccolo mantiene le email sotto la soglia di clipping Gmail di 102 KB.

Errori di ottimizzazione che rompono SVG

• Rimuovere ID che sono referenziati. I SVG usano spesso <defs> con ID referenziati tramite url(#gradient-1) in fill o stroke. La rimozione aggressiva di ID rompe gradienti, maschere, clip path, filtri. Usa uno strumento che traccia i riferimenti, non regex cieco.
• Rimuovere ciecamente gli attributi width/height. Perde il rapporto d'aspetto naturale. Il risultato: <img src="icon.svg"> si allunga per riempire il contenitore senza dimensione intrinseca, causando CLS (Cumulative Layout Shift). Mantieni almeno viewBox; preferibilmente mantieni anche width/height.
• Riduzione decimale troppo aggressiva. Ridurre a 0 decimali su piccole icone rende i percorsi visibilmente seghettati. 3 decimali è un default sicuro; vai a 1 solo per icone più grandi di 64×64 o dove la perfezione al pixel non è richiesta.
• Rimuovere xmlns durante l'inlining. I file SVG autonomi richiedono xmlns="http://www.w3.org/2000/svg". SVG inline in HTML no (il parser HTML5 lo gestisce), ma se potresti estrarre il SVG in un file più tardi, mantieni l'xmlns. La confusione qui rompe il rendering SVG di Safari.
• Sostituire currentColor con fill hardcoded. fill="currentColor" è un potente hook CSS: l'icona eredita il colore del testo. Ottimizzatori aggressivi lo sostituiscono con il valore calcolato, rompendo modalità scura e sistemi di icone tematizzati.
• Unire percorsi che dovrebbero rimanere separati. Alcune animazioni mirano a ID di percorsi specifici; alcuni strumenti di accessibilità si basano su più elementi <path> con testo <title> individuale. Il plugin mergePaths distrugge questi. Disabilitalo per SVG animati o accessibili.
• Eliminare <title> e <desc> accessibili. I SVG usati come immagini autonome o in tag <img> hanno bisogno di <title> per screen reader (simile al testo alt). La rimozione aggressiva di metadati elimina questo. O mantieni i titoli, o aggiungi aria-label sull'elemento SVG inline.

Altre domande frequenti

Quanto può davvero risparmiare l'ottimizzazione SVG?

Dipende molto dalla fonte. Le esportazioni di Adobe Illustrator spesso si riducono del 60-80% al primo passaggio, principalmente da metadati, namespace dell'editor e riduzione della precisione decimale. Le esportazioni Figma sono più pulite di fabbrica (tipicamente 20-40% di risparmio). SVG scritto a mano da uno sviluppatore? Spesso 5-15%, dato che non c'è molto da eliminare. Il logo Wikipedia, caso estremo di bloat Illustrator, è andato da 39 KB a 11 KB. Una tipica icona 24×24 da Figma scende da 1,4 KB a 0,6 KB.

Quando dovrei inlinare SVG vs usarlo come file esterno?

Inline (<svg>...</svg> in HTML) per piccole icone (sotto 2 KB), contenuto critico above-the-fold, e ovunque tu abbia bisogno di CSS per stilizzare il SVG (es. currentColor, stati hover, modalità scura). File esterno (<img src="icon.svg"> o CSS background-image) per icone identiche usate ripetutamente (il browser memorizza in cache), illustrazioni più grandi, contenuto che non ha bisogno di tematizzazione CSS. SVG sprite (file singolo con più elementi <symbol>, referenziato da <use>) era il pattern di sistema di icone del 2014-2019, ora largamente superato da componenti inline-svg in React/Vue/Svelte.

Ci sono rischi di sicurezza nei SVG non ottimizzati?

Sì. SVG può incorporare tag <script> e gestori di eventi onload, onclick; i SVG caricati dagli utenti sono un vettore XSS. SVG può referenziare risorse esterne tramite <image href="...">, perdendo l'IP del visualizzatore. I font SVG (deprecati ma ancora analizzabili) avevano storicamente buffer overflow. Un buon ottimizzatore rimuove <script> e gestori di eventi come parte della pulizia; se accetti caricamenti SVG utente, falli passare attraverso un sanificatore rafforzato (DOMPurify con profilo SVG) prima di servire.

Posso ottimizzare SVG usando la riga di comando?

Sì. npx svgo input.svg -o output.svg usa la libreria canonica SVGO. Configura plugin tramite svgo.config.js. Integrazioni CI: imagemin-svgo in webpack, vite-plugin-svgo, GitHub Action antfu/svg-opt. Per ottimizzazione batch: svgo -f ./icons -o ./icons-optimised. Lo strumento browser qui è più veloce per casi singoli e funziona senza Node installato.

Il mio SVG viene inviato a un server quando ottimizzo qui?

No. L'ottimizzazione gira interamente nel tuo browser tramite JavaScript sul markup SVG che incolli. Apri la scheda Network in DevTools mentre ottimizzi; vedrai zero richieste in uscita. Sicuro per loghi proprietari, design di icone non rilasciati, SVG aziendali interni, e qualsiasi cosa soggetta a NDA.

Strumenti correlati