Convertire WebP in SVG

Il WebP di questa pagina arriva quasi sempre da un sito web, e i siti che servono WebP sono spesso costruiti da qualcuno che possiede anche il vettoriale. Tre posti valgono un minuto: provate /favicon.svg sul dominio, aprite il codice sorgente della pagina e cercate ".svg", oppure guardate il pannello di rete mentre la pagina si carica.

Moltissimi siti includono il logo come SVG inline nell’HTML, quindi l’artwork reale — curve vere, testo vero, forme con un nome — si trova nel markup e può essere copiato direttamente. Una copia tracciata è invece una ricostruzione con contorni al posto delle lettere e segmenti adattati al posto delle curve. Quando l’originale è a un solo "visualizza sorgente" di distanza, prenderlo è sempre meglio che approssimarlo — e questa pagina serve per quando non lo è.

WebP sono in realtà due formati con la stessa estensione: un’immagine statica e un’animazione, e molte delle piccole grafiche animate del web sono del secondo tipo. Il decoder usato qui è il percorso per immagini statiche di libwebp senza demuxer collegato, quindi un file animato non viene convertito parzialmente: viene rifiutato, con un messaggio leggibile piuttosto che un primo fotogramma silenzioso.

Se vi serve il movimento, WebP in GIF o WebP in MP4 lo mantiene. Se volevate solo tracciare un fotogramma, aprite l’animazione in un browser, mettetela in pausa, fate uno screenshot del fotogramma desiderato e tracciate quello — tenendo presente che uno screenshot è a sua volta un input di tracciatura scadente se contiene testo.

WebP può essere codificato in entrambi i modi e l’estensione non lo dice. Un WebP senza perdita è equivalente a un PNG: i bordi nel file sono quelli disegnati dal designer, e si traccia con la stessa pulizia di un export. Un WebP con perdita è passato per una trasformazione che ammorbidisce le aree piatte e genera increspature lungo i bordi netti, esattamente come JPEG, e quelle increspature sono struttura agli occhi del tracciatore.

Il sintomo è un logo i cui contorni sembrano leggermente "trapuntati", con piccole forme satellite che affiancano ogni bordo che dovrebbe essere netto. Se il sito serve anche un PNG dello stesso asset — molti lo fanno, come fallback in un elemento `<picture>` — quel PNG è il file migliore da tracciare.

I siti servono le immagini alla dimensione richiesta dal layout, spesso tramite un servizio di ridimensionamento, e WebP esiste proprio perché quella dimensione possa essere piccola. Un logo di intestazione fornito a 240 o 320 pixel di larghezza è normale, ed è tutta l’informazione che il tracciatore ha a disposizione per adattarvi i contorni.

La conseguenza sono angoli arrotondati e tratti sottili incerti, e nessuna impostazione qui lo risolve, perché la soluzione richiederebbe più pixel. Prima di convertire, provate le cose ovvie: richiedete lo stesso file con un parametro di larghezza maggiore nell’URL, cercate una versione @2x o @3x, oppure controllate se il sito ha una pagina stampa o brand — le organizzazioni che ne pubblicano una quasi sempre pubblicano anche un SVG o un EPS.

Quattro per un marchio a uno o due colori, otto per un’illustrazione piatta o un badge con poche campiture, e più alto solo quando manca visibilmente qualcosa. Otto è il valore predefinito ed è un buon primo tentativo per la maggior parte delle cose salvate da una pagina.

Su un WebP con perdita l’argomento per restare bassi è più forte del solito. Ogni voce di palette in più dà al quantizzatore un posto dove mettere l’increspatura della compressione, quindi alzare il numero da otto a sedici aggiunge spesso forme fatte interamente di artefatto. Provate prima quattro su qualsiasi cosa somigli a un logo.

L’impostazione di dettaglio decide quanto strettamente ogni contorno segue la griglia dei pixel e quanto deve essere piccola una forma prima di essere scartata. Morbido si adatta in modo lasco e scarta tutto sotto i sedici pixel; nitido segue la griglia da vicino e mantiene forme fino a due pixel; bilanciato è il valore predefinito fra i due.

Morbido è l’impostazione giusta per questa pagina, perché i puntini prodotti da un WebP scaricato sono artefatti di compressione più che design. Nitido conviene solo su un WebP senza perdita di un’icona precisa al pixel, dove un dettaglio di due pixel è reale.

Una pila di percorsi riempiti, ciascuno con una campitura piena e un tratto abbinato di un pixel, più un percorso a tutto formato con opacità zero dove il WebP era trasparente. Nessun gruppo, nessun nome, nessun elemento di testo, nessuna sfumatura. Un logotipo torna come contorni a forma di lettera, quindi non potrà mai essere ricomposto nel font originale; una sfumatura torna come bande.

Per una slide, una stampa grande, un plotter da taglio o un segnaposto che ha smesso di essere sfocato, di solito basta. Come asset di marca no, e un designer lo riconoscerà come tracciato a colpo d’occhio.

Questa pagina viene usata per due situazioni che al convertitore appaiono identiche e non lo sono affatto. Recuperare il vostro stesso artwork — il marchio di un sito che possedete, o uno costruito da un’agenzia che non lo supporta più — è il caso ordinario e nessuno ha problemi con esso.

L’altro caso è ricostruire l’asset di marca di qualcun altro dal suo sito, e tracciarlo non cambia a chi appartiene. Vale la pena chiarirlo prima che il file finisca in un progetto, non dopo. È anche il motivo per cui questa conversione avviene interamente nel vostro browser: qualunque sia il file, non lascia la macchina, e non esiste una copia lato server di un logo che qualcuno potrebbe non voler condiviso.

Decodifica, ridimensionamento e tracciatura avvengono tutti nella scheda. Il decoder WebP è libwebp compilato in WebAssembly e scaricato solo quando un WebP viene rilasciato, quindi nulla riguardo all’immagine viene inviato da nessuna parte e non c’è account né limite giornaliero di mezzo.

La tracciatura in sé è imagetracerjs: 46 KB di puro JavaScript sotto licenza Unlicense. Non è il tracciatore più forte disponibile — potrace e autotrace producono curve migliori e sono GPL, VTracer è superiore a entrambi ma distribuisce una build browser senza alcuna licenza dichiarata, cosa che questo progetto considera bloccante. Su un marchio piatto la differenza fra loro è piccola.