Convertire AVIF in SVG

Questa è l’unica conversione nella famiglia AVIF in cui il file in mano decide se l’esercizio vale la pena di essere iniziato. Il tracciamento funziona trovando i bordi tra aree di colore simile e disegnando un contorno attorno a ognuna. L’opera che è stata disegnata — un logo, un’icona di app, un badge, una scansione a penna, un grafico piatto — è piena di questi bordi e si traccia in modo pulito.

Una fotografia non lo è. Ogni regione di una fotografia è un gradiente, quindi non ci sono bordi da trovare e il tracciatore li fabbrica appiattendo prima l’immagine in bande di colore. Il risultato è una copia posterizzata assemblata da migliaia di tracciati, ognuno un confine che non esiste nel soggetto ed esiste solo perché l’appiattimento lo ha messo lì. Non è un difetto di implementazione; è ciò che il tracciamento è, e nessuna impostazione su questa pagina lo cambia. La raccomandazione onesta per una fotografia è convertirla in PNG o TIFF e tenere i pixel.

AVIF esiste per rendere le pagine web più leggere, e le immagini che rendono le pagine web pesanti sono le fotografie. I siti lo usano per immagini hero, foto di prodotto e intestazioni di articoli, quindi il tipico AVIF in circolazione è esattamente il materiale che il tracciamento gestisce peggio. È anche il formato che i server consegnano quando un browser dice che lo accetta, quindi il visitatore non lo ha scelto e spesso non sa quale fosse l’originale. Chiunque sia arrivato qui dopo aver salvato un’immagine da una pagina dovrebbe verificare che cosa sia effettivamente l’immagine prima di andare oltre.

L’eccezione vale la pena nominarla perché è l’intera ragione per cui questa pagina esiste. Le pipeline di build convertono ogni asset in una directory, loghi e icone inclusi, e un designer a cui viene consegnato l’output ha un marchio piatto intrappolato in un formato di consegna fotografico. Quel file si traccia in modo splendido, e riportarlo al vettoriale è un recupero reale invece di una novità.

Ogni altra coppia su questo sito prende una rappresentazione di un’immagine e ne scrive un’altra rappresentazione della stessa immagine. Questa legge l’immagine e disegna qualcosa di nuovo che le somiglia. Nulla nell’SVG è uscito dall’AVIF invariato — non un pixel, non un confine di colore, non un bordo.

La conseguenza pratica è che l’output va guardato invece di fidarsi. Una conversione in TIFF o BMP può essere assunta corretta perché i pixel sono portati attraverso; un tracciato può essere un recupero pulito di un logo o un’approssimazione inutilizzabile di uno, e l’unico modo per dirlo è aprirlo. Lo si guardi alla dimensione a cui sarà effettivamente usato, che per un file tracciato di solito è molto più grande di quella a cui l’AVIF era mai stato mostrato — i fallimenti di un tracciato sono invisibili alla dimensione di una miniatura e ovvi su un banner. Si tenga l’AVIF finché non lo si è fatto.

Quattro colori vanno bene per un marchio monocromatico, un monogramma o un logo a due toni, e producono il minor numero di tracciati e il file più piccolo. Otto è il default e la risposta giusta per la maggior parte delle illustrazioni piatte. Sedici e trentadue conservano più ombreggiatura e moltiplicano di conseguenza il conteggio dei tracciati.

L’istinto di alzare il numero è di solito sbagliato. Ogni banda di colore extra aggiunge un altro strato di contorni impilato sopra quelli sotto, quindi un’impostazione di trentadue su un’opera che aveva solo cinque colori produce un file più grande, più lento da aprire e non più fedele. Le bande extra finiscono nelle frange antialiasate sul bordo di ogni forma, che è dove un AVIF lossy è meno accurato fin dall’inizio, quindi i tracciati aggiunti descrivono artefatti di compressione invece del disegno. Si parta da quattro o otto, si guardi il risultato, e lo si alzi solo contro qualcosa che si vede mancare.

L’impostazione di dettaglio controlla quanto strettamente i contorni tracciati si abbracciano alla griglia di pixel. Smooth arrotonda le curve e scarta i più piccoli frammenti, balanced è il default, e sharp segue i pixel abbastanza da vicino che una scaletta nella sorgente diventa una scaletta nel vettoriale.

Quale sia giusto dipende da come è stato fatto l’AVIF. Un asset che è passato per la compressione AVIF lossy porta un debole blocking attorno ai bordi duri, e sharp traccia fedelmente quel danno in nodi di tracciato permanenti; smooth lo butta via insieme a un po’ di dettaglio genuino. Per qualsiasi cosa salvata da un sito web, lo smoothing è generalmente lo scambio migliore. Sharp guadagna il suo posto su una sorgente pulita — un AVIF scritto senza perdita, o una schermata di un’interfaccia in cui la griglia di pixel è il disegno invece di un artefatto, e in cui arrotondare gli angoli sarebbe la perdita.

AVIF ha un canale alpha completo e SVG non ha sfondo, quindi un marchio ritagliato resta ritagliato: le aree che erano trasparenti sono aree che nessun tracciato copre, e qualunque cosa l’SVG sia messo sotto traspare.

I pixel semitrasparenti sono la parte scomoda. L’antialiasing lungo una curva è una banda di pixel parzialmente trasparenti, e un tracciatore che lavora in colori piatti deve risolvere ognuno o nella forma o fuori. I bordi quindi tornano leggermente più duri di come sono usciti, il che è invisibile alla dimensione di un cartello e occasionalmente visibile alla dimensione a cui l’originale era stato disegnato. Dove l’AVIF aveva una vera ombra morbida o un bordo sfumato, aspettatevi che arrivi come una serie di bande piatte concentriche invece, e che sembri un errore a meno che il numero di colori non sia portato a quattro.

Un logo che l’AVIF memorizzava come quarantamila pixel può uscire come trenta comandi di tracciato, e l’SVG è allora una frazione della dimensione e nitido a qualsiasi dimensione. È il caso buono ed è comune con l’opera per cui questa pagina è scritta.

Il caso cattivo va nell’altra direzione e va lontano. Un SVG è XML, quindi ogni forma è scritta in testo leggibile con le sue coordinate scritte come numeri, e una fotografia tracciata è un documento che ne elenca migliaia. Il testo che descrive così tante forme occupa molto più spazio di un codec costruito per comprimere fotografie, e il divario è spesso un ordine di grandezza. Il confronto viene fatto dopo che il tracciato finisce e mostrato prima che si scarichi qualcosa, che è la risposta più veloce disponibile su se questa fosse una buona idea.

Si apre in Inkscape, Illustrator e Figma, e ogni tracciato è selezionabile e ricolorabile. Ciò che non è è strutturato. Un logo disegnato ha un cerchio, un wordmark e uno sfondo come oggetti separati con nome; uno tracciato ha una pila di regioni di colore che per caso sembrano quelle cose.

Quindi è buono per scalare, stampare in grande, tagliare e ricolorare in massa, e scarso per modificare un carattere tipografico o regolare un elemento di un lock-up. Il testo è il caso più chiaro: un wordmark tracciato non contiene testo affatto, solo contorni a forma di lettere, quindi non può essere reimpostato, ri-spaziato o corretto per un errore di ortografia. Se chi ha fatto l’originale ha ancora il file sorgente, una email vale più di qualsiasi impostazione su questa pagina.

Se l’AVIF viene da un sito che controllate, la pipeline di build che lo ha prodotto è partita da qualcosa, e quel qualcosa era probabilmente un SVG o un documento di editor. Recuperarlo non costa nulla e non perde nulla.

Se l’obiettivo è una stampa grande invece di un file modificabile, il tracciamento potrebbe non servire affatto. L’AVIF arriva fino a 65.536 pixel per lato, quindi una sorgente a una risoluzione sensibile è spesso già abbastanza grande per il poster, e una conversione diretta in TIFF o PNG mantiene l’immagine invece di reinventarla. La regola pratica è ciò per cui il file è: il tracciamento è giusto quando l’opera deve essere ridisegnata, scalata senza limiti o tagliata da una macchina, e sbagliato quando deve solo essere stampata una volta a una dimensione nota.

Si carica una cartella di icone e ognuna viene tracciata a turno con le stesse impostazioni, restituite insieme come ZIP. Si adatta a un set di asset convertito all’ingrosso in AVIF da una pipeline, che è la situazione che produce la maggior parte degli input validi per questa pagina. Una cautela sui batch: le impostazioni si applicano a ogni file allo stesso modo, e una directory che mescola icone piatte con intestazioni fotografiche produrrà vettori buoni e inutili nello stesso archivio.

Tutto gira sul processore dell’utente, quindi nulla viene caricato e non c’è coda, account o limite giornaliero. Significa anche che le impostazioni possono essere cambiate e il tracciato eseguito di nuovo in secondi, il che conta qui più che in qualsiasi altra coppia: il primo risultato è raramente quello che si tiene.