Quale motore di vettorizzazione dovresti usare? Una guida ai quattro modi di SVGSnap
Trace, sketch, strokes o pixel: SVGSnap ha quattro motori di vettorizzazione, ognuno ottimizzato per un diverso tipo 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 lecita. 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 vettorizzazione. Ognuno è costruito per un diverso tipo di immagine, e scegliere quello sbagliato è la ragione principale per cui una conversione sembra peggiore di quanto ti aspettassi.
Perché quattro motori invece di uno
La prima versione di questo sito è stata rilasciata con un solo tracer, vtracer. È eccellente per illustrazioni a colori, loghi e la maggior parte dell'arte derivata da foto. Ma "la maggior parte" lascia molti casi scoperti.
Un disegno a matita tracciato come regione di colore produce due contorni per ogni linea, uno per ogni lato del tratto della penna, il che raddoppia la dimensione del file e sembra 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 una macchia grassa invece di un singolo tratto modificabile. Problemi diversi, matematica diversa.
Così il worker è cresciuto. Oggi ci sono quattro motori e ognuno è costruito intorno a un tipo specifico di immagine.
Illustration: il tracer tuttofare
Questo è quello predefinito. Sotto il cofano è vtracer, un tracer di regioni Rust che legge l'immagine, raggruppa i pixel vicini per colore e disegna curve di Bezier intorno ai bordi di ogni gruppo. Usalo per qualsiasi cosa abbia colore: loghi, icone, illustrazioni, ritratti vettoriali, screenshot di UI, foto tracciate.
Le tre impostazioni che puoi regolare sono modalità colore, livello di dettaglio e smussamento.
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 tracer semplifica. Basso ti dà meno percorsi e curve più pulite a costo dei dettagli fini. Alto preserva ogni ruga della sorgente, incluso il rumore. Per un logo piatto, abbassalo. Per un acquerello, alzalo.
Lo smussamento 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 di palloncini dopo la conversione, il tuo smussamento è troppo alto.
Usa il motore Illustration per primo. Se il risultato sembra peggiore della sorgente per una ragione che non è 'troppo pochi colori', il problema è probabilmente che dovresti usare un motore completamente diverso.
Sketch: inchiostro nero su carta bianca
Dietro il pulsante Sketch c'è potrace, lo stesso tracer che Inkscape e un centinaio 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 sfondo chiaro.
Non prenderà il colore dalla sorgente, anche se ce n'è qualcuno, 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 tracer poi disegna contorni Bezier puliti intorno alle regioni di primo piano.
Le tre manopole sono soglia, macchioline e smussamento.
La soglia è la linea tra "questo pixel fa parte del disegno" e "questa è carta." Alzala se lo scanner ha catturato troppa grana della carta. Abbassala se i tratti di matita chiari stanno scomparendo.
Le macchioline sono il --turdsize di potrace (sì, davvero). Elimina le regioni connesse più piccole del valore. Una macchiolina di 2 mantiene il punto su ogni i; una macchiolina di 10 mangerà la tua punteggiatura. Inizia da 2 a 4.
Lo smussamento corrisponde all'alphamax di potrace, che controlla quanto volentieri il tracer arrotonda gli angoli. Le linee di penna e matita sono leggermente traballanti anche quando disegni attentamente, e uno smussamento più alto trasforma il traballìo in curve pulite. Per un logo inchiostrato con angoli acuti, abbassalo.
Se hai un vero schizzo su carta e vuoi una guida più approfondita, ho scritto un post separato su come vettorizzare schizzi a matita e disegni scansionati che copre come scansionare bene fin dall'inizio.
Strokes: vettori a linea singola modificabili
Il terzo pulsante dice Strokes. Internamente è il motore centerline, e fa qualcosa di completamente diverso dai primi due.
Trace e Sketch entrambi delineano le linee. Se disegni una linea nera larga 4 pixel e esegui uno di questi, ottieni un vettore con due percorsi paralleli, uno per ogni lato del tratto, e un riempimento in mezzo. Il risultato sembra giusto ma non puoi "ispessire" la linea perché non c'è nessuna linea da ispessire. C'è solo un rettangolo riempito sottile.
La modalità Strokes 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 ricolorarlo cambiando l'attributo stroke. Puoi animarlo come effetto di disegno.
Questo è il motore che vuoi per arte disegnata a mano che hai intenzione di modificare. Flash per tatuaggi che ricolorerai in Illustrator. Una firma che vuoi animare. Uno schizzo botanico che deve essere consegnato in tre diversi pesi di tratto senza ri-tracciare.
Le impostazioni sono soglia (stessa idea di Sketch), larghezza tratto e colore tratto. L'output passa anche attraverso la semplificazione Ramer-Douglas-Peucker, che è un modo elegante per dire "elimina i punti ridondanti." Se i tuoi tratti sembrano a scatti, 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ù deciso. Esiste perché il tracciamento di curve distrugge la pixel art.
Se tracci uno sprite 32x32 con vtracer, il tracer media i pixel adiacenti di colore simile, adatta curve al risultato, e i bordi nitidi dei pixel si trasformano in macchie Bezier morbide. 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 tra 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 della tavolozza. Se il tuo input ha più colori unici del target (predefinito 256), il motore li quantizza in basso 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 massicci; mantienilo a 256 per sprite accurati.
La modalità Pixel rifiuta intenzionalmente immagini troppo grandi. Carica uno screenshot largo 4000 pixel con Pixel selezionato e otterrai un errore che ti dice di usare Illustration invece. Il motore Illustration è 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 colore che vuoi mantenere? Usa Illustration. Questo è vero per quasi ogni logo, ogni icona, ogni illustrazione. Parti dal predefinito, poi aggiusta la modalità colore e il livello di dettaglio se il primo tentativo non è giusto.
La sorgente è un disegno in bianco e nero su bianco? Sketch. Output più pulito di Illustration sullo stesso input, sempre.
È un disegno a linee che hai intenzione di modificare, ricolorare o animare i tratti? Strokes. L'output ti dà percorsi reali 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 sembrerà sbagliata o raggiungerà il limite di dimensione.
La maggior parte delle volte la risposta è Illustration. Gli altri tre esistono per i casi in cui Illustration è tecnicamente un tracer ma non il tracer giusto.
Errori che ho visto fare alle persone
Eseguire Sketch su un logo colorato. Il passaggio di soglia butta via il colore. Ottieni una silhouette nera del tuo logo e ti chiedi dove sia andato il colore del brand. Esegui Illustration su un logo colorato. Sketch è solo per sorgenti in bianco e nero.
Eseguire Pixel su una fotografia. O il limite di dimensione la rifiuta (bene) o la quantizzazione della tavolozza viene eseguita e ti dà una versione posterizzata che può essere o meno quello che volevi. Se vuoi un vero vettore di una foto, usa Illustration con alto dettaglio. Se vuoi l'aspetto posterizzato di proposito, è per questo che esiste la quantizzazione Pixel.
Eseguire Illustration 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. Sketch gestisce quell'input in un passaggio.
Aspettarsi che Strokes gestisca regioni riempite. Il passaggio di scheletrizzazione assume linee sottili. Dagli un quadrato nero solido e scheletrizza in un singolo punto al centro. Usa Strokes 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 attraverso il potenziatore di immagini a 2x o 4x prima, poi converti. Ogni motore funziona meglio con più pixel da leggere. Ho visto la stessa scansione passare da "appena utilizzabile" a "perfetta" con un passaggio di potenziamento 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 vettorizzare loghi per stampa e merchandise e per vettorizzare disegni scansionati che approfondiscono il lato delle impostazioni.
Il convertitore stesso è su svgsnap.com. Il selettore di 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 correzione più veloce.