Quale motore di vettorializzazione dovresti usare? Una guida a tutte e quattro le modalità di SVGSnap
Traccia, schizzo, tratti o pixel: SVGSnap ha quattro motori di vettorializzazione, ognuno ottimizzato per un tipo diverso di immagine. Ecco come scegliere quello giusto.
Un amico mi ha scritto la settimana scorsa con uno screenshot della schermata di caricamento e una semplice domanda: "Perché ci sono quattro pulsanti qui? Quale dovrei scegliere?" Domanda giusta. Le impostazioni predefinite funzionano la maggior parte delle volte, ma se ti sei mai chiesto cosa fanno gli altri tre, questo è il post che fa per te.
SVGSnap include quattro motori di vettorializzazione. Ognuno è costruito per un tipo diverso di immagine, e scegliere quello sbagliato è la ragione principale per cui una conversione ha un aspetto peggiore del previsto.
Perché quattro motori invece di uno
La prima versione di questo sito includeva un solo tracciatore, vtracer. È eccellente per illustrazioni a colori, loghi e la maggior parte dell'arte derivata da foto. Ma "la maggior parte" lascia molti casi scoperti.
Uno schizzo a matita tracciato come regione colorata produce due contorni per ogni linea, uno per ogni lato del tratto della penna, che raddoppia la dimensione del file e sembra una visione doppia quando lo ricolori. Uno sprite di pixel art tracciato con curve perde completamente il senso di essere pixel art. Una firma tracciata con regioni diventa un blob grasso invece di un singolo tratto modificabile. Problemi diversi, matematica diversa.
Così il sistema è cresciuto. Oggi ci sono quattro motori e ognuno è costruito attorno a un tipo specifico di immagine.
Illustrazione: il tracciatore universale
Questa è l'impostazione predefinita. Sotto il cofano è vtracer, un tracciatore di regioni Rust che legge l'immagine, raggruppa i pixel vicini per colore e disegna curve di Bézier attorno ai bordi di ogni gruppo. Usalo per qualsiasi cosa con colori: loghi, icone, illustrazioni, ritratti vettoriali, screenshot di UI, foto tracciate.
Le tre impostazioni che puoi regolare sono modalità colore, livello di dettaglio e levigatura.
La modalità colore controlla la tavolozza. Il colore completo preserva i gradienti (giusto per le illustrazioni) ma produce file più grandi. Limitato o bianco e nero forza forme piatte, che è quello che vuoi per loghi e serigrafia.
Il livello di dettaglio decide quanto aggressivamente il tracciatore semplifica. Basso ti dà meno percorsi e curve più pulite a costo dei dettagli fini. Alto preserva ogni piega della sorgente, incluso il rumore. Per un logo piatto, abbassalo. Per un acquerello, alzalo.
La levigatura corrisponde alla soglia degli angoli di vtracer. Valori più alti arrotondano gli angoli; valori più bassi mantengono gli angoli acuti. Se il tuo segno geometrico sembra un animale fatto di palloncini dopo la conversione, la levigatura è troppo alta.
Usa prima il motore Illustrazione. Se il risultato ha un aspetto peggiore della sorgente per una ragione che non è 'troppo pochi colori', il problema è probabilmente che dovresti usare un motore completamente diverso.
Schizzo: inchiostro nero su carta bianca
Dietro il pulsante Schizzo c'è potrace, lo stesso tracciatore che Inkscape e centinaia di altri strumenti hanno usato per due decenni. È l'implementazione di riferimento per un input specifico: una bitmap in bianco e nero. Matita su carta. Disegni a inchiostro. Flash per tatuaggi. Una firma scansionata. Marionette d'ombra. Qualsiasi cosa che si riduca a segni scuri su uno sfondo chiaro.
Non prenderà colori dalla sorgente, anche se ce ne sono alcuni, perché la prima cosa che fa è sogliare l'immagine a puro 1-bit. I pixel più scuri della soglia diventano primo piano; tutto il resto diventa sfondo. Il tracciatore poi disegna contorni Bézier puliti attorno alle regioni del primo piano.
Le tre manopole sono soglia, macchie e levigatura.
La soglia è la linea tra "questo pixel fa parte del disegno" e "questa è carta". Spostala verso l'alto se lo scanner ha catturato troppa grana della carta. Spostala verso il basso se i tratti leggeri a matita stanno scomparendo.
Le macchie sono il --turdsize di potrace (sì, davvero). Elimina le regioni connesse più piccole del valore. Una macchia di 2 mantiene il punto su ogni i; una macchia di 10 mangerà la tua punteggiatura. Inizia da 2 a 4.
La levigatura corrisponde all'alphamax di potrace, che controlla quanto volentieri il tracciatore arrotonda gli angoli. Le linee di penna e matita sono leggermente traballanti anche quando disegni con attenzione, e una levigatura più alta trasforma il tremolio in curve pulite. Per un logo inchiostrato con angoli acuti, abbassala.
Se hai un vero schizzo su carta e vuoi una guida più approfondita, ho scritto un post separato su come vettorializzare schizzi a matita e disegni scansionati che copre anche come scansionare bene fin dall'inizio.
Tratti: vettori a linea singola modificabili
Il terzo pulsante dice Tratti. Internamente è il motore centerline, e fa qualcosa di completamente diverso dai primi due.
Traccia e Schizzo entrambi delineano le linee. Se disegni una linea nera larga 4 pixel e usi uno di questi, ottieni un vettore con due percorsi paralleli, uno per ogni lato del tratto, e un riempimento in mezzo. Il risultato ha l'aspetto giusto ma non puoi "inspessire" la linea perché non c'è nessuna linea da inspessire. C'è solo un rettangolo riempito sottile.
La modalità Tratti prima scheletrizza l'immagine. La linea larga 4 pixel diventa una spina dorsale larga 1 pixel, e il motore disegna un singolo <path> SVG con stile di tratto lungo quella spina dorsale. Ora il percorso ha un vero attributo stroke-width. Puoi cambiarlo da 2 a 8 in qualsiasi editor vettoriale e la linea diventa più spessa. Puoi ricolorirla cambiando l'attributo stroke. Puoi animarla come effetto di disegno.
Questo è il motore che vuoi per arte disegnata a mano che prevedi di modificare. Flash per tatuaggi che ricolorirai in Illustrator. Una firma che vuoi animare. Uno schizzo botanico che deve essere fornito in tre pesi di tratto diversi senza ritracciarla.
Le impostazioni sono soglia (stessa idea di Schizzo), larghezza tratto e colore tratto. L'output passa anche attraverso la semplificazione Ramer-Douglas-Peucker, che è un modo elegante di dire "elimina i punti ridondanti". Se i tuoi tratti sembrano spezzettati, la semplificazione è stata troppo aggressiva. Se sembrano rumorosi, non è stata abbastanza aggressiva.
Pixel: vettore 1:1 per sprite e icone
Il quarto motore è il più particolare. Esiste perché il tracciamento con curve distrugge la pixel art.
Se tracci uno sprite 32x32 con vtracer, il tracciatore fa la media dei pixel adiacenti di colore simile, adatta curve al risultato, e i bordi nitidi dei pixel si trasformano in blob Bézier morbidi. La tua icona spada ora sembra uno spaghetto bagnato.
La modalità Pixel prende l'altra strada. Ogni sequenza contigua di pixel dello stesso colore diventa un <rect> allineato agli assi con shape-rendering="crispEdges". Due passate di codifica run-length (una orizzontale, una verticale) uniscono le sequenze identiche attraverso le righe così non finisci con un rettangolo per pixel. Il risultato è un vero vettore. Ogni pixel è una forma modificabile, e scala senza perdere il carattere pixelato che lo rendeva pixel art in primo luogo.
È limitato a 2048 pixel per lato. La pixel art è piccola per definizione, e rimuovere il limite significa che uno screenshot 4K si trasforma in un SVG da 200MB.
L'unica impostazione è la dimensione tavolozza. Se il tuo input ha più colori unici del target (predefinito 256), il motore li quantizza con median-cut. Questo è quello che ti permette di inserire un dipinto digitale e ottenere un output pulito in stile pixel-art invece di un fallimento. Abbassalo a 16 o 32 per look retrò-game grossolani; mantienilo a 256 per sprite accurati.
La modalità Pixel rifiuta di proposito immagini troppo grandi. Carica uno screenshot largo 4000 pixel con Pixel selezionato e otterrai un errore che ti dice di usare Illustrazione invece. Il motore Illustrazione è quello che vuoi per gli screenshot.
Come scegliere, in 30 secondi
Se non sei sicuro di quale motore usare, ecco un albero decisionale che puoi eseguire nella tua testa.
La sorgente ha colori che vuoi mantenere? Usa Illustrazione. Questo è vero per quasi ogni logo, ogni icona, ogni illustrazione. Inizia con l'impostazione predefinita, poi regola la modalità colore e il livello di dettaglio se il primo passaggio non è giusto.
La sorgente è un disegno in bianco e nero su bianco? Schizzo. Output più pulito di Illustrazione sullo stesso input, ogni volta.
È un disegno a linee che prevedi di modificare, ricolorire o animare i tratti? Tratti. L'output ti dà veri percorsi con attributi di tratto che puoi cambiare in Illustrator, Figma, o direttamente nel file SVG.
È pixel art, un piccolo sprite, o un'icona sotto 256x256? Pixel. Qualsiasi altra cosa con quel motore avrà un aspetto sbagliato o raggiungerà il limite di dimensione.
La maggior parte delle volte la risposta è Illustrazione. Gli altri tre esistono per i casi in cui Illustrazione è tecnicamente un tracciatore ma non il tracciatore giusto.
Errori che ho visto fare
Usare Schizzo su un logo colorato. Il passaggio di sogliatura butta via il colore. Ottieni una silhouette nera del tuo logo e ti chiedi dove sia andato il colore del brand. Usa Illustrazione su un logo colorato. Schizzo è solo per sorgenti in bianco e nero.
Usare Pixel su una fotografia. O il limite di dimensione la rifiuta (bene) oppure la quantizzazione della tavolozza funziona e ti dà una versione posterizzata che può essere o non essere quello che volevi. Se vuoi un vero vettore di una foto, usa Illustrazione con alto dettaglio. Se vuoi l'aspetto posterizzato di proposito, è per questo che serve la quantizzazione Pixel.
Usare Illustrazione su uno schizzo disegnato a mano. Otterrai un risultato utilizzabile. Otterrai anche linee con doppio contorno, rumore della grana della carta incorporato nelle forme, e un file due volte più grande del necessario. Schizzo gestisce quell'input in un passaggio.
Aspettarsi che Tratti gestisca regioni riempite. Il passaggio di scheletrizzazione assume linee sottili. Dagli un quadrato nero solido e lo scheletrizza a un singolo punto nel mezzo. Usa Tratti per line art, non per riempimenti.
Il motore giusto è quello che corrisponde a quello che hai disegnato, non quello con più impostazioni.
— SVGSnap Team
Quando vuoi combinare
Un flusso di lavoro che vale la pena menzionare: se la tua sorgente è uno schizzo o un'icona a bassa risoluzione, falla passare prima attraverso l'upscaler di immagini a 2x o 4x, poi converti. Ogni motore funziona meglio con più pixel da leggere. Ho visto la stessa scansione passare da "appena utilizzabile" a "perfetto" con un passaggio di upscale in mezzo.
Puoi anche rimuovere lo sfondo prima di convertire se la tua sorgente ha rumore, uno sfondo colorato, o texture della carta. Input più pulito ti dà un vettore più pulito, indipendentemente da quale motore scegli.
Se vuoi uno sguardo più da vicino a un caso d'uso specifico, ci sono guide per vettorializzare loghi per stampa e merchandising e per vettorializzare disegni scansionati che approfondiscono il lato delle impostazioni.
Il convertitore stesso è su svgsnap.com. Il selettore del motore è la riga di quattro pulsanti sotto l'anteprima del file. Scegline uno, premi converti, vedi come appare. Se l'output è sbagliato, cambia il motore, non le impostazioni. Di solito è la soluzione più veloce.