SVGZ o SVG: scegli il file per modifica e consegna

SVGZ è un file SVG compresso con gzip. Decomprimendolo recuperi il documento SVG, compresi tracciati, colori, testo ed eventuali immagini incorporate. La registrazione del tipo di media SVG del W3C definisce .svgz come alias di .svg.gz.

Scegli fra SVGZ e SVG in base al flusso di destinazione. Mantieni un normale .svg quando qualcuno ha bisogno di markup leggibile o un'applicazione richiede quel formato. Usa .svgz quando il destinatario lo supporta e hai un motivo per consegnare un file compresso. Per un sito web, controlla la compressione HTTP prima di cambiare i nomi dei file: un URL che termina con .svg può già inviare contenuto compresso.

L'esempio seguente comprime un distintivo originale da 332 byte a 243 byte, poi ripristina esattamente i byte originali. È un risultato per un file, non una promessa sulla tua grafica o sulla velocità della pagina.

Cosa cambia quando SVG diventa SVGZ?

La guida MDN ai tipi di file SVG distingue SVG testuale normale da SVG compresso con gzip e spiega la configurazione del server richiesta da SVGZ. Se non conosci il documento sottostante, parti da cosa contiene un file SVG.

Una copia compressa è un confezionamento utile. Conserva separatamente l'originale modificabile per esaminare gli oggetti, apportare correzioni ed esportare la forma richiesta dallo strumento successivo.

Prova compressione e decompressione SVGZ con un piccolo distintivo

Questa illustrazione originale contiene un esagono verde petrolio, un sole corallo e una montagna chiara. Salva quanto segue come badge.svg in una cartella di prova:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
  <title>Mountain badge</title>
  <path d="M80 12 139 46v68l-59 34-59-34V46Z" fill="#157d78"/>
  <circle cx="108" cy="53" r="12" fill="#ef8067"/>
  <path d="m38 111 32-49 21 30 10-15 25 34Z" fill="#fffdf5"/>
  <path d="m60 78 10-16 11 16-11-5Z" fill="#a8d9d3"/>
</svg>

Su un sistema con gzip, cmp e wc, esegui questi comandi in quella cartella. Usa nuovi nomi di output se quei file contengono già lavoro da conservare.

gzip -n -c badge.svg > badge.svgz
gzip -dc badge.svgz > roundtrip.svg
cmp badge.svg roundtrip.svg
wc -c badge.svg badge.svgz roundtrip.svg

Il primo comando scrive una copia compressa conservando la sorgente. L'opzione -n omette nome originale del file e timestamp dall'intestazione gzip. Il secondo comando decodifica la copia compressa in un altro file. cmp controlla i byte e wc -c ne riporta il numero.

Abbiamo eseguito questa sequenza con Apple gzip 457.140.3. Tutti i comandi sono terminati correttamente e cmp non ha trovato differenze fra l'SVG originale e quello decodificato.

Il file compresso ha risparmiato 89 byte, circa il 26.8% delle dimensioni di questa sorgente. Spazi bianchi, terminazioni di riga, metadati, grafica o impostazioni di compressione diversi possono cambiare il risultato. Il confronto dei byte dimostra che questo ciclo ha preservato la sorgente. Non misura il tempo di trasferimento nel browser, le prestazioni di rendering o la compatibilità con un'applicazione di modifica.

Se devi soltanto aprire un SVGZ in un editor che richiede SVG, la decompressione è l'operazione pertinente. Rinominare badge.svgz in badge.svg lascia al loro posto i byte compressi. Allo stesso modo, rinominare un SVG in SVGZ non esegue gzip.

Separa la compressione dalla pulizia della grafica

Supponiamo che un logo ricalcato abbia un contorno irregolare e centinaia di punti superflui. Gzip può ridurre le dimensioni memorizzate, ma la decodifica restituisce gli stessi punti. Usa la guida alla pulizia dei nodi SVG quando il problema di modifica è la complessità geometrica. Confronta la sagoma durante la semplificazione perché rimuovere punti può alterare la grafica.

L'ottimizzazione del markup è un'altra operazione. Rimuovere metadati, riscrivere numeri o unire forme compatibili cambia il documento sorgente prima della compressione. Un ciclo gzip identico byte per byte non esegue nessuna di queste operazioni. Se uno strumento di ottimizzazione modifica anche l'SVG, verifica il suo output indipendentemente invece di attribuire ogni cambiamento alla compressione. La guida alla configurazione SVGO e alla conservazione degli ID mostra questa verifica con un distintivo originale il cui aggancio CSS esterno scompare con il preset predefinito.

Un SVG può anche contenere un'immagine raster. Comprimere quel documento conserva l'immagine incorporata; non crea contorni modificabili attorno agli oggetti dell'immagine. La diagnosi del raster incorporato aiuta a distinguere un contenitore di immagini da grafica costruita con tracciati vettoriali.

Queste distinzioni rendono più facile scegliere il passo successivo: decomprimi per recuperare il markup, modifica per cambiare la geometria e ricalca soltanto quando grafica raster adatta ha bisogno di nuove forme vettoriali.

Un sito web può comprimere normali risposte SVG

La compressione HTTP è indipendente dal nome del file mostrato nell'URL. Un server può ricevere una richiesta per badge.svg e inviare una rappresentazione compressa di quell'SVG. La guida MDN alla compressione HTTP descrive la negoziazione: la richiesta dichiara le codifiche supportate e la risposta identifica quella usata. Quando la rappresentazione varia in base a Accept-Encoding, la risposta usa Vary: Accept-Encoding affinché le cache possano distinguere quelle versioni.

Per una risposta SVG codificata con gzip, le intestazioni pertinenti sono:

Content-Type: image/svg+xml
Content-Encoding: gzip

Content-Type identifica il contenuto decodificato. Content-Encoding indica al destinatario come decodificare il corpo della risposta. Il riferimento MDN a Content-Encoding spiega questa distinzione. Queste intestazioni devono descrivere i byte effettivamente inviati; aggiungere Content-Encoding: gzip a un SVG non compresso non lo comprime.

Per un .svgz memorizzato e servito come immagine SVG, le indicazioni MDN per il server SVGZ richiedono il tipo di media SVG e la codifica gzip. Esamina la risposta finale nel pannello Network del browser, compreso l'eventuale comportamento della CDN. L'apertura riuscita di un file locale non verifica quella risposta.

Prima di sostituire un SVG esistente con SVGZ, controlla se la normale risposta SVG è già compressa. Confronta le risposte effettive nelle stesse condizioni, incluso lo stato della cache, invece di confrontare le dimensioni di un file SVG locale con quelle di un trasferimento di rete. Il test del distintivo qui sopra non esegue quel confronto web.

Invia un file utilizzabile dall'applicazione successiva

Per una consegna modificabile, chiedi quale formato importa il destinatario. Se accetta SVG ma rifiuta SVGZ, fornisci l'SVG decompresso e verifica quella copia. La decompressione non può aggiungere supporto per funzionalità SVG che l'applicazione stessa non comprende.

Apri il file accettato nell'applicazione prevista ed esaminane gli oggetti. Controlla lettere, ritagli, immagini incorporate, colori e i dettagli più piccoli che contano. Mantieni questa verifica separata dalla decodifica: byte sorgente identici possono comunque essere interpretati diversamente da applicazioni con diverso supporto delle funzionalità.

Se un file appare vuoto, stabilisci prima se è stato decodificato in SVG leggibile. Poi indaga sul documento e sul contesto di visualizzazione con la guida ai problemi degli SVG vuoti. Comprimere ripetutamente non ripara colorazione invisibile, contenuto mancante o una tela inadatta.

Conserva l'originale, la copia da consegnare e una breve nota che nomina lo strumento di destinazione. È più utile che scegliere il file locale più piccolo prima di sapere dove andrà.

Quando la sorgente ha ancora bisogno di tracciati vettoriali

Se manca l'originale vettoriale e resta soltanto un logo PNG o JPG piatto, il flusso da immagine a vettore di PerfectVector può aiutare a preparare un candidato SVG modificabile. Confronta l'anteprima con l'originale, controlla fori e regioni separate e apri il file scaricato nell'editor previsto. Scegli la compressione soltanto dopo aver approvato la grafica.

PerfectVector non serve per decomprimere un SVGZ esistente. Usa la decompressione per quel lavoro. Mantieni fotografie o effetti pittorici raster quando ciò conserva l'aspetto desiderato e usa un originale vettoriale esistente ogni volta che è disponibile. Le guide del blog su formati e modifica trattano queste scelte sulla sorgente prima del confezionamento.

FAQ

SVGZ ha qualità superiore a SVG? No. La compressione gzip cambia la rappresentazione memorizzata. Una decompressione corretta ripristina la sorgente SVG; non migliora tracciati, colori o immagini incorporate.

Come trasformo un SVGZ in SVG? Decomprimilo con uno strumento che gestisce gzip, poi salva l'SVG decodificato. Per esempio, gzip -dc badge.svgz > roundtrip.svg scrive una copia decodificata. Rinominare soltanto l'estensione non esegue quell'operazione.

SVGZ rende sempre un sito web più veloce? L'estensione non implica un beneficio fisso di velocità. Una normale risposta SVG può già usare la compressione HTTP. Controlla intestazioni effettive della risposta, byte trasferiti, condizioni della cache e comportamento della pagina.

Comprimere SVG riduce il numero di nodi? No. Gzip conserva la sorgente attraverso la decodifica. La semplificazione dei tracciati o altre ottimizzazioni SVG sono operazioni separate che richiedono una verifica propria della grafica.

Fonti

1. W3C — Registrazione del tipo di media SVG — Definisce SVGZ come SVG compresso con gzip e il suo rapporto con SVG.GZ.
2. MDN — Primi passi con SVG — Distingue le forme dei file e documenta le intestazioni di risposta SVGZ.
3. MDN — Content-Encoding — Spiega la decodifica e il rapporto fra codifica e tipo di media.
4. MDN — Compressione in HTTP — Tratta la negoziazione della compressione delle risposte e la variazione della cache.

Adatta il file da consegnare allo strumento di destinazione, poi verifica la grafica decodificata. Se parti da un logo raster che richiede forme modificabili, prepara un candidato SVG e controlla i tracciati prima di decidere come comprimerlo.