SVGO: ottimizzare un SVG conservando la struttura utile

Per ottimizzare un SVG con SVGO senza comprometterne l'uso in una pagina, conserva l'originale, identifica la struttura da cui dipende la pagina, poi testa una copia ottimizzata separatamente in quella pagina. Un file più piccolo e un'anteprima autonoma invariata non dimostrano che selettori CSS, script o riferimenti funzionino ancora.

Il nostro distintivo originale rende visibile quella differenza. Il preset predefinito di SVGO ha ridotto la sorgente da 437 a 263 byte, ma ha rimosso l'ID che l'HTML circostante usava per ricolorare il sole. Disabilitare cleanupIds ha prodotto una copia di 281 byte che conservava il riferimento. Queste misure descrivono questo singolo campione con SVGO 4.1.0, non una garanzia di compressione per altra grafica.

SVGO modifica markup SVG esistente. Se hai soltanto un PNG o JPG, crea o recupera prima la geometria vettoriale. L'ottimizzazione non può trasformare gli oggetti dentro una bitmap in tracciati modificabili.

Decidi quale struttura SVG conservare

Prima di eseguire l'ottimizzatore, distingui ciò che è visibile da ciò a cui fa riferimento un altro documento o applicazione. Il preset predefinito di SVGO include operazioni che cambiano ID, gruppi, stili e dati dei tracciati. Un'integrazione può anche scegliere un diverso insieme di plugin, quindi controlla la configurazione dello strumento che elabora realmente il file.

Sono controlli separati. Conservare un ID non conserva ogni gruppo, nodo o oggetto modificabile. Analogamente, un rendering corretto non dimostra che un editor recuperi la struttura dei livelli preferita. Conserva un originale modificabile e produci una copia di consegna per il contesto di destinazione.

Per simboli riutilizzabili, la guida agli sprite SVG descrive il lato di chi usa il riferimento. Questo articolo si concentra su ciò che un passaggio di ottimizzazione può cambiare prima che quel file venga utilizzato.

Riproduci un riferimento CSS esterno rotto

Usa una cartella temporanea vuota con Node.js e npm disponibili. Salva questa illustrazione scritta a mano come input.svg, incluso il carattere di nuova riga finale. È un campione di configurazione, non un risultato di conversione PerfectVector.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
  <title>Mountain badge</title>
  <!-- Original illustration for an SVGO configuration test. -->
  <metadata>Editable master: preserve the badge-accent CSS hook.</metadata>
  <path d="M80 12 139 46v68l-59 34-59-34V46Z" fill="#157d78"/>
  <circle id="badge-accent" cx="108" cy="53" r="12" fill="#ef8067"/>
  <path d="m38 111 32-49 21 30 10-15 25 34Z" fill="#fffdf5"/>
</svg>

Installa la versione esatta usata per questo esempio, poi produci un nuovo file di uscita:

npm install --save-exact svgo@4.1.0
npx svgo input.svg -o default.svg

Esegui questo codice nella cartella pulita affinché un svgo.config.mjs esistente non fornisca impostazioni inattese. Il repository ufficiale SVGO documenta nomi di file di uscita separati e caricamento della configurazione. Per la build di un progetto, conserva versione e configurazione nel controllo di versione così un aggiornamento è una modifica deliberata.

Apri default.svg come testo. Il suo cerchio ha ancora un riempimento corallo, ma l'ID badge-accent è sparito. Quell'ID non era referenziato dentro il documento SVG. La documentazione di cleanupIds spiega che il plugin rimuove gli ID inutilizzati e accorcia quelli referenziati. Il selettore di una pagina esterna non fa parte del file fornito all'ottimizzatore in questo esempio.

Per vedere la conseguenza, inserisci direttamente il markup SVG in una pagina HTML con questo stile fuori dall'SVG:

<style>
  #badge-accent { fill: #f5bf42; }
</style>

Usa una copia per pagina in questo test. Il sole dell'SVG originale diventa dorato perché il selettore trova una corrispondenza. Il sole ottimizzato con il preset predefinito resta corallo perché manca l'ID. Caricare uno dei file attraverso un elemento img sarebbe un test diverso: la pagina ospitante non selezionerebbe una forma interna nello stesso documento.

Conserva il riferimento, poi ripeti il test

Salva questo codice come svgo.config.mjs nella stessa cartella:

export default {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          cleanupIds: false,
        },
      },
    },
  ],
};

Ora scrivi un'altra copia:

npx svgo input.svg --config svgo.config.mjs -o preserved.svg
wc -c input.svg default.svg preserved.svg

La sovrascrittura disabilita questo solo plugin mantenendo il resto del preset predefinito. È un punto di partenza per la dipendenza dall'ID dimostrata. Non è una configurazione sicura universale per grafica arbitraria, animazioni, relazioni di accessibilità o strutture specifiche di un'applicazione.

Abbiamo eseguito i comandi sopra in una cartella pulita e, indipendentemente, le configurazioni equivalenti attraverso l'API JavaScript di SVGO 4.1.0. Gli output CLI e API erano identici byte per byte, senza un carattere di nuova riga finale aggiunto ai file ottimizzati. Abbiamo poi renderizzato ogni risultato nel proprio documento HTML con la stessa regola CSS esterna. Il browser ha riportato questi risultati:

L'output che conserva l'ID ha risparmiato 156 byte, circa il 35.7% di questa sorgente. Costava 18 byte più dell'output predefinito e manteneva il comportamento necessario. Spazi bianchi, terminatori di riga, versioni e formattazione dell'output possono cambiare i conteggi dei byte.

Tutte e tre le copie hanno conservato viewBox="0 0 160 160" in questo test. Abbiamo controllato il risultato visibile e il riempimento calcolato dal browser. Non abbiamo misurato il tempo di trasferimento in rete o testato ogni browser, editor, funzione SVG o integrazione di build.

Regola le impostazioni per una dipendenza specifica

Se soltanto alcuni ID sono riferimenti pubblici, cleanupIds espone anche le opzioni preserve e preservePrefixes. Usale quando puoi nominare la dipendenza, poi ripeti lo stesso test con chi usa il file. Se diversi SVG verranno inseriti inline insieme, controlla anche gli ID duplicati. Conservare un ID già duplicato non lo rende univoco; rinominarne uno richiede di aggiornarne gli utilizzatori.

Uno stile o script dentro l'SVG può cambiare il comportamento dell'ottimizzatore. La documentazione di cleanupIds descrive una protezione che rinuncia alla pulizia quando sono presenti quegli elementi. Non estendere quella protezione al CSS in un altro documento e non forzare la pulizia senza capire quali riferimenti dipendano dagli ID.

Tratta separatamente la precisione numerica. Meno cifre decimali possono ridurre il markup, ma il cambiamento accettabile dipende dalla scala delle coordinate e dalle dimensioni finali di visualizzazione. Esamina piccoli spazi, angoli e curve alle dimensioni di utilizzo della grafica. Un controllo degli ID riuscito non dice nulla su quei dettagli.

Conserva viewBox quando il layout dipende dal suo comportamento di ridimensionamento. La documentazione del plugin removeViewBox avverte delle conseguenze su scala e ritaglio. Non è nel preset predefinito documentato usato qui; aggiungerlo esplicitamente è una decisione separata. Evita di copiare una vecchia configurazione senza controllare per quale versione e preset sia stata scritta.

Per un contorno fortemente ricalcato, ottimizzazione del markup e pulizia deliberata dei nodi rispondono anche a domande diverse. Usa la guida ai nodi SVG per giudicare se la geometria richiede semplificazione e confronta la sagoma dopo la modifica. Una sorgente più piccola non significa automaticamente un tracciato di taglio più pulito.

Verifica la copia di consegna dove verrà usata

Dopo aver scelto una configurazione, inserisci il file ottimizzato nel procedimento ricevente effettivo. Controlla lo stato predefinito e gli eventuali stati al passaggio del mouse, selezionati, a tema o animati che ne dipendono. Un'anteprima statica può non esercitare un selettore eseguito soltanto dopo un'interazione.

Per una grafica web, esamina l'output finale della build oltre al file ottimizzato locale. Un framework o bundler può eseguire una propria ottimizzazione più avanti. Ripeti il test se il markup consegnato differisce.

Per una consegna modificabile, apri la copia nell'editor previsto e seleziona le parti necessarie al destinatario. Conferma piccole scritte, fori, colori separati e ritaglio. Conserva l'originale sorgente anche quando la copia web supera i controlli.

L'ottimizzazione dei file è anche separata dalla compressione per il trasporto. La guida SVGZ rispetto a SVG dimostra un ciclo gzip di compressione e decompressione che ripristina byte sorgente identici. SVGO cambia quella sorgente prima della consegna; gzip può poi codificare quei byte. Confronta ogni operazione rispetto al proprio obiettivo.

Quando la vettorializzazione precede l'ottimizzazione

Se manca l'originale vettoriale e l'unica sorgente è un PNG o JPG piatto, il procedimento da immagine a vettore di PerfectVector può aiutare a preparare un candidato SVG. Confronta il risultato con la sorgente ed esamina fori, piccoli dettagli e regioni separate prima di accettarlo. Aggiungi gli ID o gruppi necessari alla pagina dopo aver controllato la grafica, poi ottimizza una copia di consegna e testa quei riferimenti.

PerfectVector non è un ottimizzatore per un SVG esistente e non ricostruisce i selettori del sito. Usa l'originale vettoriale esistente quando disponibile. Mantieni una foto raster quando i suoi dettagli a tono continuo contano più dei contorni modificabili. Le guide di preparazione vettoriale del blog descrivono quelle scelte della sorgente.

FAQ

Disabilitare cleanupIds rende sicura l'ottimizzazione di ogni SVG? No. Protegge gli ID dalla rimozione e dalla minificazione effettuate da quel plugin, ma altri plugin possono comunque cambiare stili, gruppi, forme o dati dei tracciati. Verifica funzioni e riferimenti usati dal procedimento ricevente.

Perché un SVG ottimizzato appare corretto da solo ma sbagliato sulla pagina? L'anteprima autonoma può non esercitare CSS o script esterni. Nel nostro esempio il riempimento corallo proprio dell'SVG veniva renderizzato normalmente, mentre la ricolorazione dorata della pagina falliva perché l'ID selezionato era stato rimosso.

Dovrei ottimizzare il mio unico originale modificabile? Conserva l'originale e scrivi una copia di consegna ottimizzata. Un file può essere renderizzato correttamente dopo l'ottimizzazione mentre la sua struttura degli oggetti è meno utile per modifiche successive.

SVGO può trasformare un PNG in tracciati vettoriali? No. SVGO elabora markup SVG. Il ricalco da raster a vettore è un'operazione precedente quando la grafica richiede geometria modificabile e non esiste un originale vettoriale adatto.

Fonti

1. Repository SVGO — Spiega installazione, output da riga di comando, caricamento della configurazione e API optimize.
2. Preset predefinito SVGO — Elenca i plugin e documenta sovrascritture e differenze di integrazione.
3. SVGO cleanupIds — Documenta rimozione degli ID, minificazione, opzioni di conservazione e protezioni correlate.
4. SVGO removeViewBox — Spiega il rischio di ridimensionamento quando si rimuove esplicitamente il viewBox.

Conserva la copia più piccola che supera i controlli di grafica e comportamento. Se il file iniziale manca ancora di geometria vettoriale modificabile, prepara un SVG dalla grafica raster, esamina le forme e conserva i riferimenti aggiunti prima di ottimizzare la copia di consegna.