Convertire SVG in AVIF

L’AVIF è il formato immagine fissa più efficiente in uso generale e vale la migrazione per fotografie, screenshot e scatti prodotto. Nessuno di quei ragionamenti si trasferisce a un disegno. Un SVG è una descrizione di forme, quindi è già circa il più piccolo possibile per esprimere quell’immagine, e si renderizza a qualunque dimensione dia il layout senza un secondo file.

La misurazione: un disegno di test da 140 byte renderizzato al valore predefinito di 1.024 pixel è uscito come AVIF di 9.730 byte. I loghi reali sono più grandi come SVG — pochi kilobyte è tipico — ma la conclusione regge anche a quella scala, e l’AVIF è quello che ha bisogno anche di un srcset e di un fallback.

Sono quattro, e vale la pena conoscerli perché non sono ovvi. Il primo è un SVG che non è davvero un vettore: un file prodotto tracciando una fotografia, o uno con un raster base64 incorporato, entrambi capaci di arrivare a centinaia di kilobyte e capaci di codificare molto più piccoli come AVIF. Il secondo è un disegno che si appoggia a filtri — sfocature gaussiane, modalità di fusione, ritagli complessi — che i browser implementano con differenze reali.

Il terzo è un vincolo di pipeline: una trasformazione CDN, un proxy immagini o un CMS che gestisce formati raster e rifiuta l’SVG. Il quarto è la fiducia — un SVG è XML che può portare script e riferimenti esterni, quindi un sito che accetta disegni dagli utenti spesso li rasterizza piuttosto che mantenere un sanificatore. Qualsiasi di questi rende corretta questa conversione.

La proprietà a cui si rinuncia è facile da sottovalutare. Un singolo SVG serve un telefono a densità 3×, un portatile a 2×, un monitor esterno a 1× e un foglio di stile di stampa, tutti dagli stessi byte, ed è nitido su ognuno. Nel momento in cui diventa un AVIF ne serve esattamente uno bene.

Recuperare il resto significa renderizzare a diverse larghezze e scrivere un srcset, cioè tre o quattro file e un pezzo di markup dove c’era un file e nessuno. Quella complessità è il vero costo di questa conversione, ed è più grande dei kilobyte su entrambi i lati del confronto.

L’impostazione della scala è l’unica decisione che vi chiede la conversione. Il valore predefinito renderizza 1.024 pixel di larghezza e l’altezza segue le proporzioni proprie del disegno; l’intervallo va da 0,1 a 10, dando 102 a 10.240 pixel.

L’abitudine da avere è trovare la larghezza CSS più grande che l’immagine occuperà mai e renderizzare al doppio, il che copre i display 2× senza arrivare a un srcset completo. Un logo mostrato a 180 pixel vuole un render a 360 pixel, non uno a 1.024.

L’AVIF è il percorso intra-fotogramma di un codec video, costruito per predire blocchi dai vicini e scartare il dettaglio residuo che un occhio in movimento non coglierebbe. Su una fotografia quel residuo è texture. Su un disegno è il bordo di una lettera, e la qualità predefinita di 82 è impostata per il primo caso.

Il risultato visibile è un leggero ammorbidimento lungo i confini netti e, a impostazioni più basse, una debole granulosità in grandi riempimenti piatti dove il codificatore ha deciso che la differenza non conti. Spingete la qualità verso 95 per grafica piatta. A queste dimensioni costa qualche kilobyte in cifra singola.

Il canale alfa passa: su un disegno di test il pixel d’angolo dell’AVIF risultante legge 0,0,0,0, quindi un marchio ritagliato cade su qualsiasi sfondo esattamente come faceva l’SVG. Non è universale fra gli obiettivi raster — il percorso GIF di questo sito trasforma lo stesso angolo in nero opaco.

Viene memorizzato come un secondo piano codificato accanto al colore, in pratica una piccola seconda immagine dentro il contenitore. Su una fotografia quel sovraccarico scompare nel rumore; su un disegno semplice dove l’intero file è pochi kilobyte è una quota visibile del totale.

Ogni browser principale attuale decodifica l’AVIF ed è così da diversi anni, abbastanza perché la maggior parte dei siti lo serva direttamente. L’SVG è letto da tutto da ben prima di allora, e da molto ciò che non è un browser: strumenti di design, software da ufficio, sistemi di ticketing, client email che mostrerebbero un’immagine rotta per un AVIF.

Quindi sostituire un vettore con un AVIF restringe l’insieme di cose che possono mostrare l’asset, e la mitigazione usuale — un elemento picture con una sorgente di fallback — significa spedire due file dove l’SVG da solo avrebbe funzionato in entrambi i posti.

Il codificatore AV1 è il modulo WebAssembly più grande spedito da questo sito e il più lento da eseguire, perché fare un AVIF fisso significa eseguire una ricerca intra-fotogramma AV1. Un singolo disegno da 1.024 pixel ha richiesto circa un secondo end-to-end nei test, incluso il recupero del codificatore la prima volta.

Per un file non è nulla. Per una cartella di duecento illustrazioni è un’attesa reale, e si ripete a ogni build se questo sta in una pipeline. Vale la pena soppesarlo contro il risultato in byte piuttosto che separatamente da esso.

Trascinate la cartella. Ogni disegno viene renderizzato alla stessa scala e codificato con la stessa qualità, e i risultati tornano come uno ZIP. Una scala condivisa è ciò che vuole di solito un insieme di illustrazioni, dato che la coerenza si legge meglio di qualsiasi singolo file ottimale individualmente.

Le loro proporzioni non corrisponderanno a meno che i viewBox sorgente non coincidessero — la scala fissa la larghezza e l’altezza segue ogni disegno — quindi controllate le dimensioni prima di collegarli a una griglia che assume un rapporto d’aspetto comune. E tenete gli SVG: sono le copie master.