Convertire PNG in SVG: vettorializzare loghi e icone

Un PNG è un'immagine raster: una griglia fissa di pixel, ciascuno con un colore e, facoltativamente, un valore di opacità. Un logo di 500 × 500 px contiene esattamente 250.000 di questi quadratini e nient'altro, quindi ingrandirlo a dimensioni da poster può solo rendere più grande ogni quadratino o sfocare gli spazi tra l'uno e l'altro. Un SVG è un'immagine vettoriale, un file di testo che elenca forme come <path>, <circle> e <rect> con coordinate e colori di riempimento. Un browser o una taglierina ridisegna quelle forme a qualsiasi dimensione serva, ed è per questo che un logo vettoriale resta nitido sullo schermo di uno smartphone come su uno striscione da fiera.

Passare da vettoriale a raster è facile, perché il renderer si limita a dipingere le forme in pixel; da SVG a PNG fa esattamente questo in un secondo. Il percorso inverso non ha scorciatoie senza perdite, perché la griglia di pixel non conserva traccia delle forme che l'hanno generata. Qualcosa deve osservare i pixel e indovinare dove ogni forma inizia e finisce. Questo passaggio si chiama tracciamento o vettorializzazione, e ogni convertitore da PNG a SVG onesto, da Illustrator a un programma da riga di comando, è in fondo un tracciatore.

Alcuni convertitori saltano la parte difficile. Scrivono un file SVG valido che contiene un solo elemento <image> con il PNG originale incorporato come testo base64, cosa che rende il file anche circa un terzo più grande del PNG. Il risultato si apre come SVG e supera un controllo del tipo di file, ma resta un'immagine a pixel in un involucro vettoriale: ingrandendo si vedono gli stessi bordi seghettati e una taglierina non trova tracciati da seguire. Aprire un SVG qualsiasi in un editor di testo e cercare data:image/png; se la stringa è presente, nulla è stato vettorializzato.

Il tracciamento dà il meglio con immagini nate come forme. Un logo esportato da un'app di grafica, un'icona piatta, un cartone animato con contorni neri, una firma scansionata o una maschera sono composti da pochi colori pieni separati da bordi netti. Il tracciatore raggruppa ogni colore in regioni, segue i loro contorni e vi adatta curve morbide, così l'SVG risulta vicino alle forme disegnate in origine dal grafico. Anche le scritte in grassetto di un logotipo si tracciano bene, perché una lettera grande è solo un'altra forma piena, e ogni glifo diventa un contorno che si può ricolorare o ridimensionare ma non più riscrivere.

Le fotografie sono il caso opposto. Un ritratto o uno scatto di prodotto ha migliaia di toni leggermente diversi che sfumano l'uno nell'altro, e un formato vettoriale non ha un modo efficiente per descriverli. Chiedendo 16 colori a un tracciatore si ottiene un'illustrazione posterizzata con bande visibili; con 64 si ottengono decine di migliaia di minuscole forme in un file molto più grande del PNG, che comunque non somiglia a una foto. Sfumature morbide, ombre esterne e aloni diventano allo stesso modo pile di bande sottili. Il testo piccolo è un terzo punto critico: a 10–12 px l'anti-aliasing fonde ogni lettera con lo sfondo e il tracciatore non distingue una «e» da una «o».

La risoluzione conta più di qualsiasi impostazione. Il tracciatore adatta ogni curva alla scalinata di pixel lungo un bordo, e più è fine la scalinata, più la curva è fedele. Se il PNG è stato esportato da Figma, Canva, Photoshop o da una presentazione, conviene esportarlo di nuovo a due o tre volte la dimensione di visualizzazione; un logo largo 1500–2000 px offre al tracciatore molto materiale. Non ingrandire prima un PNG piccolo con un ingranditore AI, a meno che il risultato non appaia pulito allo zoom 100 %, perché la trama inventata dei bordi viene tracciata con la stessa fedeltà dei bordi reali.

Poi occorre semplificare lo sfondo. Il PNG supporta la trasparenza completa, e uno sfondo trasparente è il caso più semplice: ogni pixel completamente trasparente è considerato spazio vuoto, quindi l'SVG non ha un riquadro bianco dietro l'immagine. Se il PNG ha uno sfondo pieno, conviene prima ritagliare stretto attorno al disegno; la guida su come ritagliare un'immagine con una proporzione spiega l'inquadratura precisa. Uno sfondo complesso, come un logo fotografato su una maglietta, va rimosso o coperto con un unico colore piatto prima del tracciamento.

Infine, ridurre il numero di colori prima che lo faccia il tracciatore. Nascondere ombre, aloni e sovrapposizioni sfumate nel file di origine e sostituire un riempimento sfumato con il suo colore intermedio se la versione vettoriale non ne ha bisogno. Contare i colori pieni rimasti, compreso quello del contorno, e annotare il numero: è il valore più utile da inserire nel passaggio successivo. Se si deve scegliere tra un JPEG e un PNG dello stesso logo, meglio il PNG, perché la compressione JPEG aggiunge rumore attorno a ogni bordo, come spiegato in JPG, JPEG e PNG a confronto.

Ogni tracciatore pone le stesse tre domande, anche quando le etichette cambiano. La prima è quanti colori mantenere. Nel convertitore da PNG a SVG, Modalità colore permette di scegliere tra Colore, Scala di grigi e Bianco e nero, mentre Numero di colori stabilisce in quanti gruppi vengono ordinati i pixel, da 2 a 64. Va fatto corrispondere al conteggio annotato. Se è troppo alto, il tracciatore separa i pixel anti-aliasing dei bordi in colori sottili a sé, che appaiono come un leggero alone attorno a ogni forma; se è troppo basso, due colori del marchio si fondono in uno.

La seconda domanda è come trattare i bordi. Levigatura arrotonda i gradini lasciati dai pixel, e Dettaglio decide quanto piccola può essere una macchiolina per diventare comunque una forma. La pagina PNG parte da Dettaglio 70 e Levigatura 40, valori che mantengono gli angoli piccoli in un'esportazione pulita. Abbassare Dettaglio se compaiono polvere e puntini isolati, alzare Levigatura se le curve sembrano ondulate, e impostare Curve su Linee rette per loghi geometrici con bordi rettilinei oppure su Bordi a pixel per la pixel art che deve restare a blocchi.

La terza domanda riguarda solo il tracciamento in bianco e nero: dove tracciare il confine tra inchiostro e carta. Soglia va da 1 a 254, con 128 come valore predefinito. I pixel più scuri della soglia diventano neri, quelli più chiari restano vuoti. Per una firma scritta con una sottile penna a sfera blu, alzarla verso 160–180 in modo che i tratti deboli sopravvivano; per un disegno a pennarello marcato su carta leggermente grigia, abbassarla verso 100 perché la texture della carta non diventi puntini. Modificare un'impostazione alla volta e confrontare, perché gli effetti interagiscono.

Non fermarsi all'anteprima. Aprire l'SVG in un browser e ingrandire al 400–800 % sulla curva più stretta, l'occhiello di una lettera o la punta di un vertice. Un buon tracciamento mostra archi morbidi e angoli netti dove il disegno ha angoli; uno scadente mostra ondulazioni, rientranze e punte arrotondate. Poi guardare il file in un editor vettoriale come Inkscape, Illustrator o Figma, attivando la vista contorno o nodi. Un semplice logo a due colori richiede in genere poche centinaia di nodi; se ne mostra diverse migliaia, il tracciatore ha seguito il rumore e i tracciati saranno faticosi da modificare o tagliare.

La dimensione del file è un rapido controllo di coerenza. Un SVG ottimizzato di un logo piatto pesa in genere da pochi kilobyte a qualche decina di kilobyte, spesso meno del PNG di partenza. Un file tracciato diverse volte più grande del PNG di origine indica di solito troppi colori, troppo dettaglio o una foto che non andava tracciata. Lasciare attivo Ottimizza SVG, perché arrotonda le coordinate e unisce i tracciati senza cambiamenti visibili, e infine ridimensionare il disegno a dimensioni da poster e a dimensioni da favicon per verificare che si legga bene in entrambi i casi.

L'opzione gratuita per desktop è Inkscape. Importare il PNG, selezionarlo e aprire Tracciato > Vettorizza bitmap (Maiusc+Alt+B). Le modalità a scansione singola, come il limite di luminosità, producono un unico tracciato nero, adatto ai disegni al tratto; le modalità a scansioni multiple tracciano un numero stabilito di colori o grigi come livelli sovrapposti. Il tracciamento in bianco e nero di Inkscape si basa su Potrace, una libreria di tracciamento rilasciata da Peter Selinger nel 2001. Potrace è a sua volta un programma da riga di comando che legge PBM, PGM, PPM o BMP anziché PNG, gestisce solo immagini a due toni e scrive SVG, PDF, EPS o DXF, il che lo rende una buona scelta per automatizzare grandi lotti di scansioni.

In Adobe Illustrator, Image Trace ha sostituito il vecchio Live Trace in Illustrator CS6. Inserire il PNG, aprire Finestra > Image Trace e partire da un preset come Black and White Logo, 3 Colors o 16 Colors, poi regolare Paths, Corners e Noise nella sezione avanzata. Il tracciamento resta attivo finché non si fa clic su Expand, che lo trasforma in normali tracciati modificabili. Se non è installato nessuno dei due programmi, un convertitore nel browser esegue lo stesso processo di riduzione dei colori, ricerca dei bordi e adattamento delle curve; il convertitore da immagine a SVG accetta anche JPG, WebP e HEIC e può scrivere EPS, PDF o DXF al posto di SVG.

Sul web, SVG è una raccomandazione W3C dal 2001 e ogni browser attuale lo visualizza in un tag <img>, come sfondo CSS o inline nell'HTML, dove i colori possono persino cambiare al passaggio del mouse. Un logo tracciato sostituisce di solito più dimensioni di PNG per gli schermi retina con un solo file leggero. Per le taglierine, SVG è il formato atteso da Cricut Design Space e Silhouette Studio: ogni forma tracciata diventa un tracciato di taglio, e un tracciamento multicolore arriva come livelli separati da tagliare in vinili di colori diversi. Taglio laser e software CNC preferiscono di solito il DXF, che da PNG a DXF produce con le stesse impostazioni di tracciamento.

Le tipografie chiedono grafica vettoriale perché una macchina da stampa, un digitalizzatore per ricamo o una taglierina per insegne hanno bisogno di bordi, non di pixel, e un SVG tracciato spesso basta per adesivi, magliette o uno striscione. Resta comunque un'approssimazione: le curve sono stime adattate, i colori sono medie di pixel e il testo è convertito in contorni. Perciò, prima di tracciare il logo di un'azienda, conviene chiedere a chi l'ha realizzato. Un grafico o un'agenzia hanno quasi sempre l'originale AI, EPS, PDF o SVG con curve esatte, colori con nome e font, e inviarlo richiede loro un minuto. Il tracciamento è lo strumento giusto quando l'originale è andato perso, quando il logo sopravvive solo su una carta intestata scansionata o quando il disegno è opera propria.