Da JPG a SVG: Conversione da Raster
a Vettoriale

Raster vs Vettoriale: la differenza fondamentale

Ogni immagine digitale rientra in una di due categorie: raster o vettoriale. Capire la differenza è essenziale per sapere cosa può e non può fare la vettorializzazione.

Un'immagine raster (JPG, PNG, BMP, TIFF) memorizza un'immagine come una griglia rettangolare di pixel colorati. Ogni pixel è un piccolo quadrato con un singolo valore di colore. Il numero totale di pixel — la risoluzione — determina quanti dettagli l'immagine può contenere. Una foto da 3000×2000 pixel contiene 6 milioni di valori di colore individuali. Ingrandendo, si vedono i singoli quadrati. Scalando l'immagine oltre la sua risoluzione nativa, il software deve inventare nuovi pixel tra quelli esistenti, producendo un risultato sfocato e interpolato.

Un'immagine vettoriale (SVG, AI, EPS, PDF) memorizza un'immagine come un insieme di istruzioni matematiche. Un cerchio è descritto come un punto centrale e un raggio. Una curva è un'equazione di Bézier con punti di controllo. Una regione riempita è un tracciato chiuso con un colore di riempimento. Poiché l'immagine è definita dalla matematica anziché dai pixel, può essere renderizzata a qualsiasi risoluzione — da una favicon 16×16 a un cartellone da 10 metri — con nitidezza perfetta ogni volta. Il motore di rendering ricalcola semplicemente le curve per la dimensione target.

Questa differenza fondamentale significa che la conversione da raster a vettoriale non è come convertire WAV in MP3 o JPG in PNG. Questi sono cambi di formato all'interno dello stesso modello di dati (pixel in pixel, o campioni in campioni). La conversione da raster a vettoriale è una ricostruzione — il software deve interpretare i dati pixel e costruire una rappresentazione matematica completamente nuova dell'immagine.

Come funziona la vettorializzazione automatica

Quando carichi un'immagine JPG su CleverUtils e la converti in SVG, il file passa attraverso una pipeline a più fasi. Capire ogni fase aiuta a spiegare perché certe immagini si vettorializzano perfettamente mentre altre producono risultati inaspettati.

Fase 1: Conversione bitmap

L'immagine di input (JPG, PNG, o qualsiasi formato raster supportato) viene prima convertita in una bitmap grezza usando ImageMagick. Questo passaggio decodifica l'immagine compressa in una griglia di pixel non compressa che l'algoritmo di tracciamento può elaborare. Tutte le caratteristiche specifiche del formato (artefatti di compressione JPEG, canali alfa PNG, metadati EXIF) vengono rimosse, lasciando una bitmap pulita.

Fase 2: Sogliatura (da scala di grigi a binario)

Potrace, il motore di tracciamento, lavora con immagini a due toni (binarie) — ogni pixel è o nero o bianco. La bitmap in scala di grigi viene convertita in binario usando una soglia di luminosità. La luminosità di ogni pixel viene confrontata con il valore soglia (da 0.0 a 1.0, predefinito 0.5):

• I pixel più scuri della soglia diventano neri (primo piano)
• I pixel più chiari della soglia diventano bianchi (sfondo)

Questo è il passaggio più critico della pipeline. La soglia determina quanta parte dell'immagine originale viene acquisita come primo piano. Una soglia di 0.3 cattura solo gli elementi più scuri; 0.7 cattura la maggior parte dell'immagine, producendo un output più pesante.

Fase 3: Tracciamento dei bordi

Potrace scansiona la bitmap binaria e identifica i confini tra le regioni nere e bianche. Segue questi confini pixel per pixel, costruendo un contorno grezzo di ogni forma. L'algoritmo gestisce le forme annidate (una regione bianca all'interno di una regione nera all'interno di un'altra regione bianca) tracciando la gerarchia delle relazioni interno/esterno.

Fase 4: Adattamento di curve di Bézier

I contorni pixel grezzi della Fase 3 sono forme a scalini dentellati. Potrace adatta curve di Bézier lisce a questi contorni, sostituendo i bordi a scalini con curve matematiche pulite. L'algoritmo di adattamento minimizza l'errore tra il confine pixel originale e la curva adattata, mantenendo compatta la descrizione del tracciato.

Due parametri controllano questo processo:

• Levigatura degli angoli (-a): Controlla se gli angoli vengono renderizzati come angoli vivi o curve morbide. Un valore di 0 preserva tutti gli angoli; 1.334 leviga tutto.
• Ottimizzazione (-O): Controlla quanto aggressivamente potrace semplifica le curve. Valori più alti producono tracciati più semplici con meno punti di controllo, ma potenzialmente un tracciamento meno preciso.

Fase 5: Output SVG

Le curve di Bézier adattate vengono scritte come elementi path SVG — XML standard che qualsiasi browser, strumento di design o macchina da taglio può renderizzare. La pipeline completa ha questo aspetto:

Cosa si vettorializza bene

Il passaggio di sogliatura binaria è la chiave per capire quali immagini producono un eccellente output SVG. Le immagini che si dividono naturalmente in regioni chiare e scure — con bordi netti e minima gradazione — si mappano perfettamente sul binario bianco/nero che potrace elabora.

Il filo conduttore: alto contrasto, bordi netti, gamma tonale limitata. Se riesci a socchiudere gli occhi e riconoscere ancora la forma essenziale dell'immagine, si vettorizzerà bene.

Cosa NON si vettorializza bene

Lo stesso processo di sogliatura che funziona brillantemente per logo e disegni al tratto fallisce con immagini che hanno variazioni tonali continue. Quando un'immagine contiene milioni di sottili transizioni di colore e luminosità, forzare ogni pixel al bianco o al nero distrugge le informazioni visive che rendono l'immagine significativa.

• Fotografie: Un ritratto o un paesaggio contiene gradienti morbidi su pelle, cielo, fogliame e tessuti. La sogliatura riduce tutto questo a regioni nette di bianco e nero, producendo un aspetto astratto o posterizzato. Il file SVG potrebbe anche essere enorme — migliaia di piccoli tracciati che cercano di rappresentare ciò che era originariamente una variazione tonale morbida.
• Scene complesse: Immagini affollate con molti elementi sovrapposti, profondità variabili e sfondi complessi producono un output vettoriale caotico e confuso con troppi tracciati per essere utile.
• Gradienti morbidi: Un cielo al tramonto, una sfumatura di colore o un effetto vignetta non possono essere rappresentati come bianco/nero binario. Il gradiente viene suddiviso in bande discrete con bordi dentellati.
• Texture dettagliate: Trama del tessuto, venatura del legno, pori della pelle, pelliccia — queste texture di dettaglio fine generano un numero enorme di piccoli tracciati vettoriali che né hanno un bell'aspetto né servono a uno scopo pratico.
• Immagini a bassa risoluzione: Una miniatura da 100×100 pixel fornisce al tracciatore così pochi pixel con cui lavorare che le curve diventano grossolane e squadrate. Un input ad alta risoluzione produce sempre curve più morbide.
• JPG fortemente compressi: Gli artefatti di compressione JPEG (pattern a blocchi attorno ai bordi) confondono il rilevamento dei bordi, producendo tracciati vettoriali rumorosi che seguono gli artefatti di compressione anziché il contenuto effettivo dell'immagine.

La nostra pipeline Potrace

CleverUtils usa potrace (Polygon Tracer), creato da Peter Selinger, per la conversione da raster a vettoriale. Potrace è lo stesso motore usato dalla funzione "Trace Bitmap" di Inkscape ed è ampiamente considerato il miglior auto-tracer open source disponibile.

La pipeline di conversione ha tre componenti:

1. ImageMagick convert — Decodifica il file di input (JPG, PNG, WebP, TIFF, PSD, ecc.) e lo converte in una bitmap BMP grezza che potrace può elaborare
2. Pipe (|) — I dati BMP vengono trasmessi direttamente a potrace senza scrivere un file temporaneo, mantenendo il processo veloce ed efficiente in memoria
3. potrace — Traccia i contorni della bitmap e produce un file SVG con curve di Bézier pulite

Il comando completo:

convert input.jpg BMP:- | potrace -s --opaque -o output.svg

Questa configurazione predefinita usa una soglia di 0.5, levigatura degli angoli moderata e ottimizzazione standard. Per la maggior parte di logo, disegni al tratto e grafiche semplici, i valori predefiniti producono un output eccellente senza alcuna regolazione dei parametri.

Impostazioni di vettorializzazione

Potrace offre diversi parametri che controllano la qualità e il carattere dell'output vettoriale. Capire queste impostazioni ti aiuta a ottenere i migliori risultati per diversi tipi di immagini sorgente.

Soglia (-k)

Il parametro più importante. Controlla il limite di luminosità tra nero (primo piano) e bianco (sfondo) nella fase di conversione binaria. Intervallo: 0.0 a 1.0, predefinito 0.5.

Levigatura degli angoli (-a)

Controlla se il tracciatore preserva gli angoli netti o li arrotonda in curve. Intervallo: 0 a 1.334, predefinito 1.

• -a 0 — Tutti gli angoli sono netti. Adatto per forme geometriche, pixel art e diagrammi tecnici dove si vogliono angoli precisi.
• -a 1 (predefinito) — Levigatura moderata. Gli angoli vicini a 90 gradi rimangono netti; gli altri vengono arrotondati.
• -a 1.334 — Levigatura massima. Tutti gli angoli diventano curve. Produce l'output più morbido, adatto per forme organiche e scrittura a mano.

Rimozione del rumore (-t turdsize)

Rimuove piccole macchie isolate dall'immagine binaria prima del tracciamento. Il valore specifica la dimensione massima (in pixel) delle regioni da scartare. Predefinito: 2.

• -t 0 — Mantieni tutto, incluso il rumore a singolo pixel. Usalo solo per immagini sorgente molto pulite.
• -t 2 (predefinito) — Rimuove piccole macchie (regioni di 1-2 pixel). Funziona per la maggior parte delle immagini.
• -t 10-50 — Rimuove aggressivamente le caratteristiche piccole. Utile per documenti scansionati con polvere, trama della carta o artefatti di compressione.

Ottimizzazione (-O)

Controlla quanti segmenti di curve di Bézier potrace usa per approssimare ogni contorno. Un'ottimizzazione più alta produce tracciati più semplici (meno byte SVG) ma potenzialmente un tracciamento meno preciso. Il livello di ottimizzazione predefinito è un buon equilibrio tra fedeltà e dimensione del file per la maggior parte delle immagini.

Quando vettorializzare

La vettorializzazione non è un aggiornamento universale — è lo strumento giusto per casi d'uso specifici in cui le proprietà della grafica vettoriale offrono un chiaro vantaggio rispetto alle immagini raster.

Stampa in grande formato

Banner, espositori per fiere, rivestimenti per veicoli e segnaletica per edifici richiedono tutti materiale grafico che possa essere scalato a metri senza perdere qualità. Un logo progettato a 300×200 pixel diventa un pasticcio sfocato su un banner da 3 metri. Convertirlo in SVG fornisce alla tipografia un file indipendente dalla risoluzione che si renderizza nitidamente a qualsiasi scala.

Icone scalabili ed elementi UI

Siti web e applicazioni visualizzano le icone a molte dimensioni: 16px nei menu, 32px nelle barre degli strumenti, 64px nelle card delle funzionalità, 128px nelle sezioni hero. Servire un PNG separato per ogni dimensione è dispendioso. Una singola icona SVG si renderizza perfettamente a ogni dimensione, risponde allo stile CSS (cambia colore al passaggio del mouse) e tipicamente pesa meno di un singolo PNG.

Disegni al tratto scansionati

Architetti, ingegneri e artisti spesso scansionano schizzi disegnati a mano, planimetrie o diagrammi tecnici. Il JPG scansionato è una cattura raster di qualcosa che era originariamente disegnato con linee e curve — esattamente ciò che il formato vettoriale rappresenta nativamente. Vettorializzare la scansione ricostruisce l'intento originale, producendo tracciati vettoriali puliti e modificabili dai dati pixel scansionati.

Macchine da taglio e CNC

Cricut, Silhouette, taglierine laser e router CNC richiedono tutti input vettoriale per generare i percorsi utensile. Se il tuo design esiste solo come JPG o PNG, la vettorializzazione è il ponte tra il design raster e l'operazione di taglio fisica. I tracciati vettoriali diventano le linee esatte che la macchina segue.

Ricamo e serigrafia

Le macchine per ricamo hanno bisogno di contorni vettoriali per generare i percorsi dei punti. La serigrafia richiede separazioni vettoriali pulite per ogni livello di colore. In entrambi i casi, vettorializzare un logo o un design raster è il primo passo nel flusso di lavoro di produzione.

Alternative basate su intelligenza artificiale

Potrace è un tracer algoritmico tradizionale — rileva i bordi e adatta le curve usando l'ottimizzazione matematica. Eccelle nell'output in bianco e nero da sorgenti ad alto contrasto, ed è veloce, gratuito e deterministico (lo stesso input produce sempre lo stesso output).

Per i casi d'uso che potrace non gestisce bene, i vettorializzatori basati su IA offrono un approccio diverso:

Strumenti come Vectorizer.AI e Recraft usano il machine learning per identificare le forme, separare i livelli di colore e generare un output SVG multicolore pulito da immagini complesse. Possono gestire logo a colori, illustrazioni con gradienti e persino alcuni contenuti fotografici che potrace non riesce a gestire.

Tuttavia, per i casi d'uso di vettorializzazione più comuni — conversione di un logo B&N, tracciamento di un disegno al tratto, creazione di file SVG di taglio per Cricut, o vettorializzazione di testo scansionato — potrace produce risultati eccellenti istantaneamente e gratuitamente. Rimane il motore dietro a "Trace Bitmap" di Inkscape, uno degli strumenti di vettorializzazione più usati al mondo.

Consigli di pre-elaborazione per risultati migliori

La qualità dell'output SVG dipende molto dalla qualità dell'immagine di input. Qualche minuto di preparazione prima del caricamento può migliorare notevolmente il risultato della vettorializzazione.

• Aumenta il contrasto: Apri l'immagine in qualsiasi editor (anche l'editor integrato del telefono) e sposta il cursore del contrasto verso l'alto. Un contrasto più forte significa bordi più netti da seguire per il tracer.
• Ritaglia con precisione: Rimuovi lo sfondo non necessario. Meno pixel irrilevanti significa un output più pulito e file SVG più piccoli.
• Usa la risoluzione più alta disponibile: Un'immagine da 2000×2000 pixel fornisce al tracer 4 volte più dati sui bordi rispetto a una versione da 1000×1000. Più pixel significa curve più morbide.
• Preferisci PNG a JPG quando possibile: La compressione JPEG crea artefatti a blocchi attorno ai bordi. Questi artefatti confondono il tracer, producendo tracciati vettoriali rumorosi. Se hai entrambi i formati disponibili, usa il PNG.
• Converti prima in scala di grigi: Se l'immagine è naturalmente in B&N (come uno schizzo o un logo), convertirla esplicitamente in scala di grigi prima del caricamento rimuove qualsiasi rumore di colore che potrebbe influire sulla sogliatura.
• Rimuovi il rumore di sfondo: Per i documenti scansionati, usa un'operazione "livelli" o "curve" per portare il bianco della carta al bianco puro e l'inchiostro al nero puro. Questo elimina la trama della carta e gli artefatti di scansione.