Semplificatore di path SVG

Incolla un SVG o trascina il file sulla zona di caricamento: la pagina riscrive i dati dei path con SVGO v4 e ti mostra esattamente quanto hai guadagnato. Vedi i byte prima e dopo, la percentuale risparmiata, la dimensione con gzip e l'anteprima dell'originale accanto al risultato, così controlli che la forma non si sia spostata.

La leva è la precisione. I programmi di grafica esportano le coordinate con sei decimali (`M 12.847362 4.019283`), circa mille volte più fini di quanto uno schermo possa mostrare. Il cursore va da 0 a 6 e qui parte da 2, un passo sotto l'ottimizzatore SVG generale, perché questa pagina è pensata per i dati dei path e due decimali bastano da soli a dimezzare quasi tutti gli attributi `d=`. Il cursore regola due plugin di SVGO insieme: `convertPathData` per i comandi dei path e `cleanupNumericValues` per tutti gli altri numeri del documento, così niente resta con sei decimali accanto a un path che ne ha due.

Come scegliere il valore: 3 non si vede a nessuno zoom, 2 è giusto per icone e loghi mostrati sotto qualche centinaio di pixel, 1 va bene per piccole icone monocromatiche e inizia a spostare le curve su tutto ciò che è più grande, 0 è sicuro solo per rettangoli e forme allineate agli assi. L'anteprima si aggiorna a ogni modifica, quindi il metodo onesto è abbassare il cursore finché vedi una differenza e poi tornare indietro di un passo.

Cosa fa `convertPathData` oltre ad arrotondare. Riscrive ogni path nella forma equivalente più corta: i comandi assoluti diventano relativi dove è più breve (`M 100 100 L 120 100` diventa `M100 100h20`), i segmenti dritti passano da `L` a `H` o `V`, i sottopercorsi di lunghezza zero e ridondanti spariscono, e le curve vengono riscritte nella forma abbreviata che occupa meno caratteri. Con una precisione ragionevole è tutto senza perdita: il browser disegna gli stessi pixel con meno byte.

`mergePaths` prende i `<path>` consecutivi con gli stessi attributi di stile e li unisce in un solo elemento con un solo `d=`. Su un'icona esportata come una dozzina di forme separate vale spesso dal 5 al 20% del file, quasi tutto in tag e attributi `fill=` ripetuti che spariscono. Gira in automatico, ed è il motivo per tenere l'originale se in futuro vuoi animare i singoli path: una volta uniti, niente può più puntarli separatamente.

Segmenti e attributi inutili fanno la stessa fine. `removeUselessStrokeAndFill` toglie gli attributi `stroke` e `fill` che ripetono il valore predefinito, `convertShapeToPath` trasforma `<rect>`, `<polygon>` e simili in path così `mergePaths` può raggiungerli, `removeUselessDefs` elimina le voci di `<defs>` che nessuno usa, e `collapseGroups` scioglie i `<g>` che non aggiungono niente.

Cosa non fa, ed è la parte che quasi tutte le pagine sbagliano: non toglie punti di ancoraggio. Un path che entra con 4.000 punti esce con 4.000 punti. Tutto quello descritto sopra fa costare meno byte a ogni punto, ma niente ridisegna la curva. Se ti servono davvero meno nodi, perché il path viene da una vettorializzazione ed è pesante da animare o modificare a mano, quella è una ricostruzione della curva (Ramer-Douglas-Peucker e simili) e per definizione cambia la forma. Lo fanno il menu Tracciato di Inkscape, la funzione Semplifica di Illustrator e la libreria simplify-js. Fallo prima, poi porta qui il risultato per il passaggio senza perdita: i due passaggi si sommano.

Le altre impostazioni. Mantieni viewBox è attiva e conviene lasciarla così, a meno che l'SVG non abbia una dimensione fissa che non cambi mai, perché toglierla rompe il ridimensionamento con il CSS per risparmiare circa 25 byte. Mantieni gli attributi id è disattiva, e va bene così a meno che il file non sia uno sprite o che CSS e JavaScript selezionino i nodi per id. Mantieni <title> / <desc> è disattiva; attivala quando la grafica ha un significato, perché gli screen reader leggono il `<title>`. Multipass è attiva e ripete la pipeline finché il risultato smette di ridursi, trovando un altro 3–8% sui path complessi. Formatta il risultato indenta il codice invece di scriverlo su una riga.

Guarda il numero con gzip, non quello grezzo. Ogni server web comprime gli SVG prima di inviarli, e gzip comprimeva già gran parte delle ripetizioni che SVGO elimina. Un 60% in meno sui byte grezzi diventa spesso un 25–40% dopo gzip, ed è la cifra con gzip che si traduce in tempo di caricamento.

Il motore è SVGO, la stessa libreria usata dalla CLI, da webpack, da Vite e da svgr, che qui gira nel browser invece che in Node. Con le stesse impostazioni il risultato è identico byte per byte a quello di `npx svgo` in locale. Non viene caricato niente e non c'è una coda, come conferma la scheda Rete. Per una pulizia generale, con lo stesso motore, precisione predefinita 3 e la rimozione dei metadati degli editor in primo piano, usa l'ottimizzatore SVG di questo sito.