Convertire PNG in SVG

PNG è lossless, quindi nulla è stato sfocato prima che il tracciatore lo veda: i bordi nel file sono esattamente i bordi disegnati dallo strumento di design, con solo l'antialiasing previsto lungo di essi. È la differenza tra questa pagina e ogni altra sorgente nella matrice di tracciamento, e si vede direttamente nel risultato.

Misurato sul campione badge di questo sito, una grafica piatta a 480 per 320 pixel: 7.136 byte di PNG tracciati a 2.481 byte di SVG agli otto colori predefiniti, in cinque tracciati. Più piccolo dell'originale e ora scalabile fino a un'insegna — il caso per cui la funzione esiste. Cinque tracciati è anche il numero da osservare. Quando un tracciato di opera piatta torna come cinque o dodici o trenta forme, ha funzionato; quando torna come ottocento, l'input non era opera piatta e le prossime due sezioni spiegano quale tipo fosse.

Quasi ogni PNG che arriva su questa pagina è stato esportato da qualcosa. Il file Figma, il documento Sketch, l'artboard Illustrator o il design Canva che lo ha prodotto è una sorgente SVG genuina piuttosto che una ricostruzione, e ne esporta uno da un menu — pulito, con curve reali, testo reale e livelli nominati.

Vale la pena cinque minuti di ricerca perché la differenza è permanente. Un logo tracciato ha contorni dove l'originale aveva lettere, quindi il wordmark non può mai essere riscritto nel carattere del brand, e le curve sono approssimazioni adattate che un designer noterà a colpo d'occhio. Si traccia quando l'account è chiuso, l'agenzia non c'è più, il file è su un portatile morto, o l'unica copia sopravvissuta del marchio è il PNG sul vecchio sito. Sono abbastanza comuni che questa pagina esiste; restano comunque la seconda scelta migliore.

Il tracciatore legge tutti e quattro i canali, quindi un logo ritagliato su sfondo trasparente non torna su un quadrato bianco. Le regioni che erano trasparenti vengono emesse come tracciati con opacità zero, e l'opera visibile sta sopra di essi, comportandosi come faceva il PNG quando viene messo su una pagina colorata.

Il meccanismo vale la pena conoscerlo perché non è un canale alfa. SVG non ha un canale alfa da avere; ha forme con opacità, e un rettangolo a opacità zero che copre la tela è ciò che diventa uno sfondo trasparente. Ne seguono due conseguenze. I pixel semitrasparenti — il bordo morbido di un'ombra portata, una sovrapposizione al 40% — vengono quantizzati in un piccolo numero di gradini di opacità invece di una rampa continua, quindi un'ombra morbida diventa a bande. E il tracciato di sfondo invisibile è ancora nel file, quindi cancellarlo in Inkscape è di solito il primo riordino da fare.

Gli screenshot sono i PNG più comuni al mondo e la cosa meno adatta da tracciare. Il testo con antialiasing è un ammasso di grigi leggermente diversi attorno a ogni tratto, e ognuno di quegli ammassi diventa un piccolo tracciato proprio, quindi un paragrafo si trasforma in migliaia di forme che insieme approssimano un testo leggermente sbagliato.

La misurazione sul campione screenshot di questo sito è netta: un PNG da 2.608 byte è diventato 166.255 byte di SVG in 871 tracciati a otto colori — sessantaquattro volte la dimensione, per un risultato peggiore in ogni modo inclusa la leggibilità. Se il punto erano le parole, la conversione PNG in TXT le legge con Tesseract. Se il punto era un'immagine nitida di un'interfaccia, il PNG lo è già ed è una frazione della dimensione di qualsiasi cosa tracciata da esso.

Quattro per un marchio monocromatico o un logo a due toni, otto per un'illustrazione piatta con alcuni riempimenti, sedici dove c'è ombreggiatura reale, trentadue solo quando qualcosa manca visibilmente a sedici. Otto è la predefinita ed è il primo tentativo giusto per opere uscite da uno strumento di design.

L'impostazione non si comporta come un cursore di qualità, e le misurazioni sul badge mostrano perché: 3.900 byte a quattro colori, 2.481 a otto, 10.263 a sedici e 10.168 a trentadue. Più colori hanno prodotto un file *più piccolo* a un passo e un salto di quattro volte al successivo, perché il quantizzatore sceglie una tavolozza nuova ogni volta e una tavolozza che capita di allinearsi con l'opera produce regioni meno numerose e più grandi. Provare due impostazioni richiede quindici secondi e lo risolve meglio di qualsiasi ragionamento sull'argomento.

Ogni strumento di design applica antialiasing in esportazione, quindi anche un logo dai bordi netti ha una rampa di uno o due pixel di colore intermedio lungo ogni confine. Quelle rampe sono i puntini che un tracciato lascia dietro di sé, e l'impostazione di dettaglio decide se sopravvivono. Smooth scarta qualsiasi forma sotto sedici pixel e adatta i contorni in modo lasco; sharp mantiene forme fino a due pixel e segue la griglia da vicino; bilanciato sta nel mezzo ed è predefinito.

Per un logo, smooth è di solito la risposta giusta e il punto di partenza più ordinato. Sharp si guadagna il suo posto su un disegno tecnico o un'icona pixel-precisa dove una regola a un pixel è contenuto significativo piuttosto che un artefatto. Ciò che il tracciatore non fa mai è sfocare prima l'immagine: il raggio di sfocatura è fissato a zero, perché pre-sfocare riduce il conteggio dei puntini ammorbidendo esattamente i bordi duri che erano l'unico motivo per tracciare un logo.

Qualsiasi cosa più lunga di 1.600 pixel sul lato maggiore viene ridotta prima di tracciare. È un tetto di costo più che di qualità — il costo di tracciamento cresce con il numero di bordi, e un'immagine grande ha bordi ovunque — e non costa nulla all'output, perché un logo tracciato a 1.600 pixel e lo stesso logo tracciato a 4.000 rendono in modo identico a qualsiasi dimensione.

La direzione che conta è l'altra. Un'esportazione favicon a 200 pixel ha così pochi pixel lungo ogni curva che i contorni adattati arrotondano visibilmente gli angoli, e nessuna impostazione lo recupera. Se qualcosa in proprio possesso può ancora esportare l'opera, gli si chiede qualcosa nella regione di 1.600 pixel di larghezza. Un asset @2x o @3x già seduto in una cartella di build è di solito la cosa migliore disponibile e vale la pena cercarlo prima di convertire l'@1x.

Ciò che torna è una pila di tracciati riempiti con riempimenti solidi e tratti da un pixel corrispondenti. Nessun gruppo, nessun nome di livello, nessun elemento testo, nessuna sfumatura, nessun simbolo. Un wordmark sono contorni di lettere, non lettere; un cerchio è una sequenza di segmenti curvi adattati, non un cerchio; una sfumatura è stata ridotta a bande di colore piatto.

Per la maggior parte di ciò per cui questa pagina viene usata è accettabile, perché la destinazione è una taglierina, un'incisore, una stampa grande o un segnaposto che deve smettere di sfocarsi. Non è accettabile come sostituto master. Se il marchio torna in un sistema di brand, si tratta il tracciato come un riferimento da ridisegnare sopra piuttosto che come l'originale recuperato — le forme sottostanti sono di solito pochi cerchi e un carattere tipografico, e ridisegnarli richiede meno tempo di ripulire un loro tracciato.

Se il file è una fotografia, nessun tracciatore aiuterà e i percorsi PNG in JPG o PNG in AVIF sono ciò che la situazione richiede davvero. Se è uno screenshot e l'obiettivo è un file più piccolo, il PNG è già vicino all'ottimale per i colori piatti dell'interfaccia; AVIF lo ha battuto nei campioni di questo sito solo sulla fotografia, non sullo screenshot.

Se l'obiettivo è una favicon, PNG in ICO è la coppia che produce il file che un browser richiede, e non serve vettorializzare prima. E se l'obiettivo era un file pronto per la stampa a dimensione fissa, PNG in PDF o PNG in TIFF consegna alla stampante qualcosa che accetteranno senza alcun ridisegno. Il tracciamento vale la pena farlo quando l'opera deve genuinamente scalare o essere tagliata, e vale la pena saltarlo il resto del tempo.

Decodifica, scalatura e tracciamento avvengono tutti nel browser. Nulla viene caricato, non c'è account e non c'è limite giornaliero — cosa che conta su questa pagina in particolare, perché l'opera che la gente cerca di recuperare è quasi sempre un logo che qualcuno possiede e preferirebbe non pubblicare sul server di uno sconosciuto.

Il tracciatore è imagetracerjs: 46 KB di puro JavaScript sotto Unlicense. Non è l'opzione più forte disponibile. potrace e autotrace adattano curve più pulite e sono GPL; VTracer è migliore di entrambi e correttamente licenziato, ma l'unico suo pacchetto per browser non dichiara alcuna licenza, cosa che questo progetto tratta come bloccata invece che permissiva. Sulle esportazioni piatte per cui questa pagina è scritta, il divario tra loro è abbastanza piccolo che la licenza ha deciso.