Convertire GIF in SVG

Il tracciamento funziona trovando i confini tra aree di colore simile e disegnando un contorno attorno a ciascuna area. Significa che è al massimo quando quelle aree esistono davvero, con bordi netti e nessuna variazione sottile al loro interno.

Un’immagine indicizzata è esattamente questo per costruzione. Un frame GIF è disegnato da una palette di al massimo 256 voci, quindi ogni pixel è uno di un piccolo insieme di valori esatti e le regioni sono già piatte prima che il tracciatore le guardi. La limitazione che rende la GIF un cattivo formato fotografico è, per questa sola conversione, la cosa che ne fa una buona sorgente.

Vale la pena essere precisi su ciò che esce. L’SVG non è il disegno che qualcuno ha fatto nel 1998 e ha esportato come GIF; è un nuovo insieme di percorsi adattato ai pixel di quell’esportazione. Dove l’originale aveva un cerchio perfetto, la traccia ha una curva chiusa che segue un cerchio fatto di pixel.

Alle dimensioni a cui la gente usa davvero questi file la differenza non si vede. Ciò che si vede è ovunque l’originale avesse qualcosa che un percorso non può rappresentare: un gradiente diventa un insieme di bande a gradini, un’ombra portata diventa diverse forme concentriche, e l’antialiasing lungo una curva diventa un contorno sottile extra in un colore intermedio.

L’opzione colori riduce l’immagine a quel numero di riempimenti piatti prima che vengano disegnati i contorni, ed è l’impostazione con il maggiore effetto sia sull’aspetto sia sulla dimensione del risultato. Quattro dà le forme più pulite possibili ed è adatto a un marchio monocolore. Otto è il default e copre la maggior parte dei loghi. Sedici e trentadue seguono più da vicino la sorgente e moltiplicano il numero di percorsi.

L’istinto di prendere il numero più alto è di solito sbagliato. Più colori significa che la frangia antialias attorno a ogni bordo riceve percorsi propri anziché essere assorbita nel riempimento su entrambi i lati, e quei percorsi sono sia la massa del file sia la prima cosa che si cancellerebbe a mano. Partire basso e salire solo se qualcosa di importante è scomparso è la strada più veloce.

L’impostazione di dettaglio controlla due soglie di errore e una dimensione minima di forma. Smooth accetta un adattamento più lasco ai bordi dei pixel e scarta qualunque forma più piccola di sedici pixel; balanced dimezza quelle tolleranze e lascia cadere forme sotto gli otto; sharp segue i pixel da vicino e mantiene tutto sopra i due.

L’effetto pratico è sullo speckle. L’antialias lascia una dispersione di frammenti da uno e due pixel lungo ogni bordo, e su sharp diventano tutti percorsi — centinaia, invisibili singolarmente, responsabili della maggior parte della dimensione del file. Smooth li rimuove e arrotonda leggermente gli angoli nel processo. Per un logo che verrà scalato in alto, smooth è quasi sempre la risposta migliore; per pixel art che si vuole davvero conservare, sharp è l’unica che lo preserva.

Se la GIF è stata fatta da una fotografia o un gradiente, l’encoder ha quasi certamente applicato il dithering — spargendo pixel di due colori di palette in uno scacchiere così che l’occhio ne faccia la media. Sembra una transizione morbida e non lo è.

Per un tracciatore sono migliaia di piccole regioni alternate, ciascuna delle quali diventa un percorso. L’output è enorme, il file impiega molto a essere disegnato, e il risultato visivo è un pasticcio posterizzato anziché il gradiente che imitava. Questo è l’unico indicatore affidabile del fatto che questa conversione funzionerà: zoomare nella GIF, e se le aree piatte si rivelano scacchiere, fermarsi qui.

Qualunque cosa con un lato più lungo sopra i 1600 pixel viene ridotta a quello prima che i contorni vengano trovati. Il costo del tracciamento cresce con il numero di bordi anziché con la dimensione del file, e un’immagine grande ha un bordo quasi ovunque, quindi senza un tetto una sorgente grande produce un SVG da diversi megabyte in decine di secondi.

Per questa conversione il tetto non costa nulla, e non è una sfumatura. L’output è indipendente dalla risoluzione: un marchio tracciato da un’immagine a 1600 pixel e lo stesso marchio tracciato da un’immagine a 4000 pixel vengono renderizzati identicamente a qualsiasi dimensione su schermo o in stampa. Ciò che cambia è quanto strettamente i percorsi abbracciano la griglia di pixel originale, che è una differenza che servirebbe zoomare nella sorgente per vedere.

Uno screenshot contenente testo è stato misurato a quaranta volte la dimensione dell’immagine sorgente quando tracciato. Ogni lettera antialias diventa una propria collezione di forme, i contorni interni delle lettere diventano percorsi separati, e il risultato è sia enorme sia leggermente sbagliato a ogni tratto.

La mossa giusta quando la grafica contiene parole è tracciare solo il simbolo e impostare le parole come testo reale nell’SVG in seguito, nel typeface effettivo. Questo produce un file più piccolo, un output più nitido a ogni dimensione, e qualcosa che può essere modificato o tradotto dopo. Tracciare il testo ha senso solo quando le lettere sono davvero artwork personalizzato anziché un font.

Niente qui cerca di prevedere se la GIF in particolare verrà tracciata bene. Un’euristica sul numero di colori sarebbe un’ipotesi, e la risposta vera è disponibile un momento dopo gratuitamente: tracciare il file, poi guardare ciò che è uscito rispetto a ciò che è entrato.

La pagina mostra entrambe le dimensioni, quindi un risultato che è quaranta volte più grande si annuncia immediatamente. Trattare quello come il segnale anziché come una curiosità: un SVG più grande della sorgente sta dicendo che l’immagine non aveva regioni piatte da trovare, e nessuna combinazione di impostazioni cambierà quel fatto sull’immagine.

Il tracciatore è una piccola libreria JavaScript — 46 KB, scelta in parte perché le alternative migliori sono licenziate in modi che un sito statico non può onorare — e gira nella scheda. La GIF viene decodificata, ridotta, tracciata e scritta come SVG senza che parta una richiesta dal browser.

Il beneficio pratico oltre la privacy è la velocità su file piccoli. Non c’è upload, nessuna coda e nessun download del risultato da un altro posto, quindi un logo viene tracciato in meno di un secondo e provare tre conteggi di colori diversi costa solo i click.

Un'anteprima in Inkscape o Illustrator mostra i percorsi generati dal tracciatore, e spesso conviene selezionarli tutti e applicare un'operazione di semplificazione dei nodi prima di andare oltre. Il tracciatore inserisce un nodo in ogni cambio di direzione del bordo, e su un'immagine complessa sono migliaia: ridurli a uno per curva con una soglia ragionevole produce un file più piccolo, percorsi più puliti, e un editing successivo molto più gestibile.

Vale la pena anche riorganizzare i percorsi in gruppi logici — un gruppo per il corpo del marchio, uno per il contorno, uno per i dettagli interni. Il tracciatore non sa cosa sia cosa e produce un singolo insieme piatto; ricostruire la logica in seguito richiede cinque minuti e rende il file utilizzabile per variazioni future, come un cambio di colore del fondo o un'esportazione in formati diversi.