Convertire BMP in SVG

Ogni altra conversione su questo sito prende un’immagine e scrive la stessa immagine in un altro formato. Questa non può, perché non ci sono forme in un bitmap da portare avanti — un BMP è una griglia di valori di colore e nient’altro, senza alcun registro del logo, delle lettere o delle linee che l’hanno prodotto.

Quindi il tracciatore indovina. Trova i confini tra aree di colore simile e disegna un tracciato attorno a ciascuna, e il risultato è un nuovo disegno che assomiglia per caso alla vecchia immagine. Quell’ipotesi è ciò che il tracciamento è, ed è il motivo per cui questa pagina spende la sua lunghezza su quali immagini ci azzecca piuttosto che sulle impostazioni. È anche il motivo per cui niente qui cerca di predire l’esito dal file: un’euristica sul conteggio dei colori sarebbe un’ipotesi su un’ipotesi, e la risposta reale è disponibile gratis un momento dopo guardando ciò che è uscito.

Regioni piatte con confini reali tra di esse: un logo, un wordmark, un’icona, un’illustrazione piatta, uno schema, un disegno al tratto scannerizzato. Quel materiale è fatto esattamente della cosa che l’algoritmo cerca, quindi l’uscita è un piccolo set di tracciati puliti che scalano a qualsiasi dimensione senza diventare sfocati.

Misurato prima che questo fosse costruito piuttosto che dopo: un logo piatto ha fatto il viaggio di ritorno fedelmente — bordi netti, colori corretti, angoli arrotondati intatti — e 6 KB di PNG sono diventati 16 KB di SVG che ora scala a un cartellone. Più grande, e ne vale la pena, perché il file più grande è quello che può essere stampato a un metro di larghezza. Questa è la forma di un tracciamento riuscito su questa pagina: un aumento modesto in byte in cambio dell’indipendenza dalla risoluzione. Se l’uscita è molte volte l’input invece di poche volte, il tracciamento non ha funzionato e le prossime due sezioni spiegano perché.

Ciò che esce è un elenco di tracciati riempiti, quindi Inkscape, Illustrator e Figma lo apriranno tutti e vi permetteranno di selezionare una forma, ricolorarla, spostarla o eliminarla. Per un logo recuperato di solito è l’intero lavoro: tracciate a quattro o otto colori, eliminate le macchie errate che il tracciatore ha lasciato lungo i bordi, impostate i riempimenti sui valori esatti del marchio, e la grafica è di nuovo utilizzabile.

Quanto sia piacevole dipende interamente dal conteggio delle forme. Un marchio pulito tracciato a quattro colori è una manciata di tracciati e si comporta come qualcosa che una persona ha disegnato. Una fotografia tracciata è migliaia di blob sovrapposti senza struttura, senza nomi e senza raggruppamento, e modificarla non è significativamente più facile che ridisegnare l’immagine. I tracciati inoltre non corrispondono a nulla: non c’è un tracciato che sia "la lettera A", solo il contorno di una regione che per caso era di un colore.

La posterizza. Una fotografia non ha regioni piatte — un cielo è un gradiente continuo e un viso è un gradiente continuo — quindi il tracciatore fabbrica i confini di cui ha bisogno riducendo prima l’immagine a una manciata di colori, e poi ne traccia i contorni.

L’esito misurato è quello da aspettarsi: una fotografia è uscita quattro volte più grande dell’originale compresso e visibilmente posterizzata. Entrambe le metà sono negative, il che è insolito — la maggior parte dei compromessi qui vi dà qualcosa in cambio. Se l’obiettivo era far scalare una fotografia, niente lo realizza, e la mossa giusta è tenere i pixel e usare la versione più grande che avete.

Uno screenshot contenente testo ha prodotto un SVG quaranta volte la dimensione del PNG. Ogni lettera anti-aliased è un ammasso di grigi leggermente diversi, e ognuno di essi diventa il suo piccolo tracciato, quindi un paragrafo di testo si trasforma in migliaia di forme che insieme sembrano un testo leggermente sbagliato.

Dato che le catture dello schermo sono una delle cose più comuni che arrivano come BMP, vale la pena dirlo con forza. Se il punto erano le parole, la conversione BMP in TXT le legge. Se il punto era un’immagine nitida dell’interfaccia, il PNG mantiene ogni pixel esattamente ed è una frazione della dimensione sia del bitmap sia del tracciato.

Quattro colori per un marchio monocolore o un logo semplice, otto per un’illustrazione piatta, sedici dove c’è ombreggiatura reale, trentadue solo quando il risultato manca visibilmente di qualcosa. Il predefinito è otto ed è il punto di partenza giusto per la maggior parte della grafica che arriva come bitmap.

Il costo di alzarlo non è lineare in nessun modo che sembri equo. Ogni colore aggiuntivo è un altro set completo di regioni da tracciare, quindi il conteggio delle forme e la dimensione del file salgono rapidamente mentre il miglioramento visivo si appiattisce. Provare otto e poi sedici richiede venti secondi e chiude la questione meglio di ragionarci sopra. C’è una seconda ragione per tenere basso il numero che non ha nulla a che fare con la dimensione: un logo tracciato a quattro colori è qualcosa che potete ripulire dopo, e uno tracciato a trentadue è qualcosa che potete solo accettare o scartare.

L’impostazione del dettaglio controlla quanto da vicino i tracciati seguono i pixel. "Liscio" accetta una vestibilità più larga e scarta qualsiasi forma sotto i sedici pixel, il che rimuove le macchie che l’anti-aliasing lascia lungo ogni bordo. "Netto" mantiene forme fino a due pixel e segue la griglia da vicino. "Bilanciato" sta nel mezzo ed è il predefinito.

"Liscio" di solito è giusto per un logo e "netto" di solito è giusto per un disegno tecnico dove una linea sottile conta. Ciò che l’impostazione non fa mai è sfocare prima l’immagine: ciò ridurrebbe il conteggio delle macchie ammorbidendo esattamente i bordi duri che erano l’unica ragione per tracciare un logo, quindi il raggio di sfocatura resta a zero in ogni impostazione.

Il costo del tracciamento cresce con il numero di bordi piuttosto che con la dimensione del file, e una fotografia grande ha un bordo quasi ovunque. Lasciato com’è, una sorgente da dodici megapixel può produrre un SVG multi-megabyte in decine di secondi — un esito peggiore di quello che il visitatore stava cercando di evitare.

Ridurre prima non è la perdita che sarebbe in una conversione raster. L’uscita è indipendente dalla risoluzione, quindi un logo tracciato a 1.600 pixel di larghezza e lo stesso logo tracciato a 4.000 rendono identicamente a qualsiasi dimensione; ciò che cambia è solo quanto strettamente i tracciati abbracciano la griglia di pixel originale. Dato che un BMP è non compresso e quindi spesso enorme, questo tetto viene raggiunto su questa pagina più che su qualsiasi altra.

Dopo il tracciamento, i due conteggi di byte sono misurati e confrontati, e l’interfaccia dice da che parte è andata. Quell’avvertimento è il nucleo onesto della funzione — nessuna euristica predice se un tracciamento funzionerà, ma la risposta è disponibile gratis un momento dopo.

Ha bisogno di una correzione quando la sorgente è un bitmap. Contro tre byte non compressi per pixel quasi tutto sembra una vittoria, quindi una fotografia tracciata può essere più piccola del suo BMP da 36 MB pur essendo quattro volte più grande di un PNG della stessa immagine e considerevolmente peggiore. Convertite il bitmap in PNG anche e confrontate contro quel numero invece; è quello che riflette ciò che il tracciamento è effettivamente costato. Le misurazioni citate sopra sono tutte contro originali compressi per la stessa ragione — un confronto contro un bitmap non compresso avrebbe fatto sembrare ognuno di essi un successo, inclusa la fotografia.

Il tracciamento è fatto da imagetracerjs: 46 KB, JavaScript puro, rilasciato sotto Unlicense. Non è il miglior tracciatore disponibile. potrace e autotrace producono curve più pulite e sono GPL; VTracer produce l’uscita migliore dei quattro ed è propriamente licenziato, ma il suo unico packaging per browser non dichiara alcuna licenza, che questo progetto tratta come bloccato piuttosto che come permissivo.

Ciò che compra è una conversione che gira interamente nel vostro browser. Il bitmap è decodificato, scalato e tracciato nella scheda, niente è caricato, e non c’è account o limite giornaliero — il che conta, perché la grafica che la gente cerca di recuperare in questo modo è quasi sempre un logo di cui qualcuno è proprietario.