Convertire SVG in BMP

Questi due formati stanno agli estremi opposti di tutto. Un SVG è testo: un elenco di tracciati, riempimenti e trasformazioni che un renderer trasforma in immagine alla dimensione richiesta, quindi il file non ha risoluzione né costo in byte fisso. Un BMP è l'immagine già fatta, memorizzata come righe letterali di colore senza compressione, senza struttura e senza nulla da interpretare.

Quel divario è l'intero argomento di questa pagina. Andare in una direzione è un rendering — una decisione su dimensione, sfondo e antialiasing, presa una volta e poi permanente. Andare nell'altra non è possibile; non c'è percorso da una griglia di byte indietro alle forme che l'hanno disegnata.

Un attributo width e height su un SVG è un suggerimento, non una dimensione — il disegno è definito dal suo viewBox e può essere prodotto a qualsiasi risoluzione. Quindi la conversione deve sceglierne una, e l'impostazione di scala è quella decisione. Il predefinito renderizza 1.024 pixel di larghezza e l'altezza segue le proporzioni del disegno; la scala va da 0,1 a 10, dando da 102 a 10.240 pixel.

Si sceglie il numero di cui la destinazione ha davvero bisogno invece del più grande disponibile, perché il costo qui è insolitamente ripido. A differenza di PNG o WebP, la dimensione di un bitmap non dipende affatto da cosa contiene l'immagine: raddoppiare la larghezza quadruplica il file che il disegno sia un'illustrazione completa o una singola linea nera.

Ogni pixel occupa tre byte — blu, verde e rosso, in quest'ordine — e ogni riga viene arrotondata a un multiplo di quattro. Si aggiunge un'intestazione di 54 byte ed è l'intero file. Un quadrato di 1.024 pixel sono 3.072 byte a riga e 3.145.728 byte di dati immagine, per un totale di 3.145.782.

Quindi un SVG di poche centinaia di byte diventa circa tre megabyte all'impostazione predefinita, e circa dodici a scala 2. Non è un difetto del convertitore; è ciò che è BMP, ed è il motivo per cui qualsiasi cosa abbia una scelta ne sceglie un altro. Se la destinazione ha un limite di dimensione, si fa la moltiplicazione prima di convertire invece che dopo.

Il bitmap scritto qui è a 24 bit per pixel senza quarto canale. Esiste una variante di intestazione che definisce l'alfa, e file che la usano esistono, ma il supporto per essa è esattamente il tipo di cosa che di solito si sceglie BMP per evitare — quindi la trasparenza deve essere risolta prima.

Il disegno viene renderizzato sul nulla e poi appiattito sul colore di sfondo in un unico passaggio, il che conta: riempire prima e scalare dopo farebbe sanguinare il riempimento nei bordi, e scalare un'immagine trasparente prima di appiattire lascia una frangia di pixel semitrasparenti che il riempimento poi scurisce. Si imposta il colore su qualunque superficie su cui il bitmap si troverà. Bianco è il predefinito ed è sbagliato su un pannello scuro.

Il rendering viene fatto da resvg compilato in WebAssembly invece che dal motore SVG proprio del browser, ed è deliberato. Dare un SVG a un canvas dà ciò che quel browser decide: metriche del testo diverse, supporto filtri diverso, risultati visibilmente diversi per lo stesso file in Chrome e Safari. Un unico renderer significa che il bitmap è identico su ogni macchina che lo produce.

Conta più qui che sulla maggior parte delle destinazioni. Un bitmap destinato a un dispositivo o a un installer viene di solito controllato una volta e poi considerato affidabile per sempre, a volte confrontato byte per byte con un riferimento. Un rendering che varia per browser renderebbe quel confronto privo di senso.

SVG memorizza il testo come testo e si riferisce a un carattere tipografico per nome. Se il font non è incorporato nel file, il renderer ne sceglie un altro, e un wordmark spaziato con cura torna con forme delle lettere e spaziatura diverse. È il motivo singolarmente più comune per cui un SVG renderizzato sembra sbagliato.

Il rimedio appartiene allo strumento di design, non qui: si convertono i testi in contorni o tracciati prima di esportare, e le lettere diventano forme che nulla può sostituire. Rende anche il file sicuro da consegnare a chiunque altro, cosa che vale la pena fare comunque se il disegno va in un sistema che non si controlla.

Perché leggerlo non richiede alcuna libreria. Un microcontrollore che pilota un piccolo display può saltare oltre l'intestazione di 54 byte e copiare byte in un framebuffer con un ciclo; supportare PNG sullo stesso dispositivo significa aggiungere un decompressore, un allocatore di memoria e un parser di chunk a qualcosa che potrebbe avere 32 KB di RAM.

La stessa logica copre risorse installer caricate tramite le chiamate bitmap proprie della piattaforma, controlli Windows più vecchi, e fixture di test che confrontano immagini senza un codec in mezzo. In ogni caso il formato viene scelto per la prevedibilità, e i megabyte sono il prezzo.

Si cancella il bitmap e se ne può fare un altro. Si cancella l'SVG e il bitmap è tutto ciò che resta, e tutto ciò che rendeva utile il disegno — modificabilità, risoluzione arbitraria, una cronologia confrontabile come testo nel controllo versione — è perso per sempre. Tracciare un BMP indietro in tracciati indovina i bordi e produce un file diverso con più nodi e curve peggiori.

Si tratta la conversione come un passo di esportazione, idealmente uno eseguito dalla propria build piuttosto che fatto a mano. Quando il pannello ha bisogno di una dimensione diversa il prossimo anno, si ri-renderizza dal vettore invece di scalare un bitmap da tre megabyte.

Si trascina l'intero insieme. Ogni file viene renderizzato alla stessa scala e appiattito sullo stesso sfondo, di solito ciò di cui hanno bisogno queste destinazioni — un insieme di grafiche per pannello in disaccordo sui propri sfondi sembra peggio di ognuna singolarmente imperfetta.

Si osserva la dimensione totale. Venti disegni alla scala predefinita sono circa sessanta megabyte di bitmap prima dello ZIP, abbastanza da essere lento su un telefono e abbastanza da riempire lo storage di un piccolo dispositivo. Ridurre la scala a ciò che il display mostra davvero è la cosa singolarmente più efficace da fare a quel numero.