SVGcode: controlla le forme che esporti

Per il tracciamento delle immagini SVGcode, carica la tua grafica raster, scegli Color SVG o Monochrome SVG, regola la traccia, quindi ispeziona lo stesso SVG esportato. Controllane i colori, i fori interni e la tela prima di accettarlo. Nel nostro test a colori piatti, SVGcode ha prodotto percorsi reali e ha mantenuto l'apertura della cornice, ma entrambe le varianti esportate hanno modificato la tavolozza originale e utilizzato una tela diversa.

Se desideri un altro flusso di lavoro del browser per un'immagine che già possiedi, visualizzala in anteprima gratuitamente in PerfectVector. È necessario sbloccare il risultato prima di poterlo modificare o esportare. Utilizza gli stessi controlli di forma e colore di seguito; questa procedura dettagliata non confronta la qualità di output dei due strumenti.

Provalo con la tua immagine

Apri lo strumento completo

PNGJPGWEBPPNGSVGRilascia qui la tua immagineo fai clic · incolla ⌘VSeleziona immagineRilascia per controllare l’immagine

Puoi provarlo gratis. Rilascia un’immagine e guarda l’anteprima del tuo vettoriale, senza registrarti.

Cosa traccia SVGcode e cosa preparare

SVGcode converte le immagini raster in grafica vettoriale SVG. Il suo autore descrive un'implementazione WebAssembly basata su Potrace che traccia colore per colore; il repository ufficiale dei sorgenti documenta tale implementazione. Questo spiega l'approccio, ma il file esportato è la prova della tua opera d'arte.

Inizia con una copia di un PNG o di un'altra immagine raster supportata, un browser che possa accedere a SVGcode e l'autorizzazione per elaborare la grafica. Per il percorso degli appunti riportato di seguito, il browser deve consentire l'accesso agli appunti delle immagini. Tieni a disposizione un editor di testo semplice per salvare il markup SVG copiato, oltre a un visualizzatore o editor SVG per il controllo del completamento.

Un segno piatto con regioni colorate distinte è un primo input utile. Registra i colori e le aperture che devi conservare prima di modificare le impostazioni. Per una foto o una sfumatura morbida, decidi quali dettagli puoi semplificare; il tracciamento non può dedurre ogni confine previsto dai pixel. La guida alla vettorizzazione delle immagini spiega la decisione da raster a percorso in modo più dettagliato.

1. Carica l'immagine e scegli una modalità di tracciamento

Apri SVGcode e carica la tua immagine. Per il percorso che abbiamo testato, inserisci l'immagine reale negli appunti e scegli Incolla immagine. Conferma che l'anteprima mostri l'immagine desiderata, comprese le aree trasparenti e i piccoli dettagli interni, prima di modificare qualsiasi cosa.

Scegli Color SVG quando sono importanti le regioni colorate separate. Utilizza Monochrome SVG quando il risultato desiderato è una silhouette monocromatica. Questa procedura dettagliata ha utilizzato Color SVG ovunque; non riporta un test monocromatico separato.

Mantieni aperto il raster originale accanto all'anteprima. Non giudicare la traccia solo dal fatto che i suoi bordi appaiano lisci quando ingranditi. Un centro vuoto, un piccolo spazio vuoto o un colore deliberatamente separato possono avere più importanza di un bordo esterno liscio.

2. Modifica le impostazioni tenendo presente un dettaglio visibile

Inizia con un difetto che puoi evidenziare, come punti indesiderati all'esterno dell'opera d'arte o una piccola apertura che scompare. Modifica un controllo, attendi l'aggiornamento dell'anteprima, quindi confronta nuovamente i dettagli.

Sopprimi macchioline rimuove piccole regioni. Alzarlo può aiutare con i punti vaganti, ma controlla i piccoli dettagli che intendi conservare. Posterizza immagine di input riduce la variazione di colore prima del ricalco; la posterizzazione raggruppa i colori in meno livelli. La procedura dettagliata SVGcode dell'autore spiega sia i controlli che la posterizzazione per canale.

L'app corrente espone anche la larghezza del tratto e le impostazioni avanzate. Lascia stare i controlli che non ti servono finché non disponi di un'esportazione di base. Un ampio insieme di modifiche simultanee rende difficile dire quale abbia alterato il risultato.

Illustrazione

Cosa ha mostrato il nostro test originale a colori piatti

Abbiamo realizzato un PNG 512 × 512 con uno sfondo trasparente, una cornice rettangolare blu scuro con un'apertura, un rettangolo dorato e un rettangolo verde acqua sovrapposto. Abbiamo incollato l'immagine originale nell'app SVGcode pubblica, utilizzato Color SVG, Elimina macchioline 2 e Larghezza tratto 0, quindi copiato due output SVG effettivi.

Il primo utilizzava Posterize Input Image con rosso, verde e blu in 7 passi ciascuno e alfa in 1 passo. Il secondo utilizzava la stessa immagine con Posterizza immagine di input deselezionata. I controlli RGB e alfa sono stati disabilitati in quel secondo stato.

La disattivazione della posterizzazione non ha ripristinato gli esatti colori originali di questa immagine. Entrambi gli SVG hanno inoltre posizionato l'opera d'arte su una tela diversa. Queste sono osservazioni da un'immagine controllata, non un punto di riferimento o una previsione per ogni file. Sono buoni motivi per verificare l'esportazione effettiva prima di utilizzarla come master di colore o layout.

3. Copia l'SVG e conserva il markup effettivo

Quando l'anteprima è pronta, scegli Copia SVG. Attendi il completamento dell'Ottimizzazione SVG prima di leggere o incollare gli appunti. Nella nostra analisi, la lettura immediata degli appunti era vuota; leggendolo dopo l'ottimizzazione ha restituito il markup SVG.

Incolla il markup in un editor di testo semplice e salvalo con un'estensione .svg, come artwork-trace.svg. Verifica che contenga un elemento <svg> e un </svg> di chiusura anziché uno screenshot o un documento rich-text. Mantieni un nome file separato per ciascuna variante delle impostazioni in modo che l'esportazione successiva non sostituisca il tuo riferimento.

Questo è il percorso di markup copiato che abbiamo completato. SVGcode visualizza anche Salva SVG, ma questa procedura dettagliata non dimostra il comportamento della finestra di dialogo di salvataggio del file nativo o l'importazione riuscita in un'altra app.

4. Ispeziona colori, aperture e tele nel file salvato

Apri l'SVG salvato in un visualizzatore o editor, accanto alla fonte intatta. Controllali separatamente:

1. Tavolozza: confronta i riempimenti importanti con i valori di colore previsti. Una traccia può mantenere tre regioni cambiando tutti e tre i colori. Se sono richiesti colori esatti, ripristina e verifica i riempimenti previsti nel tuo editor.
2. Aperture: posiziona uno sfondo contrastante dietro l'opera d'arte. Il nuovo sfondo dovrebbe essere visibile attraverso i fori previsti e lo spazio esterno. Una forma dipinta di bianco può sembrare un'apertura sul bianco. La guida sullo sfondo SVG trasparente mostra come distinguere i due.
3. Tela: controlla i limiti del documento e della grafica. Il viewBox definisce il rettangolo delle coordinate interne dell'SVG; non è una promessa di dimensioni fisiche. Controlla i margini e le dimensioni nell'app in cui utilizzerai il file.
4. Geometria: seleziona singolarmente le regioni importanti e prova una piccola ricolorazione o spostamento, quindi annulla. Un file contenente percorsi necessita ancora di un controllo di modificabilità per il lavoro previsto.

SVG può rappresentare un'apertura con diversi contorni all'interno di un tracciato composto; lo standard del percorso SVG descrive sottopercorsi e buchi. Non è necessario un elemento di percorso separato per ogni confine visibile. Al contrario, un basso numero di percorsi da solo non dimostra che tutti i dettagli previsti siano sopravvissuti.

Il nostro controllo di completamento è stato digitale: ispezionare il markup copiato ed eseguire il rendering degli SVG effettivi. L'apertura e lo spazio esterno erano trasparenti in entrambe le varianti. Non è stato testato alcun risultato di importazione, stampa o taglio dell'editor di destinazione. Per una revisione più ampia del trasferimento, utilizza la scheda di valutazione della qualità della traccia vettoriale.

Recuperare dal primo controllo fallito

Se un foro rimane errato, la guida alla risoluzione dei problemi dei fori SVG separa la geometria della traccia mancante dall'interpretazione della regola di riempimento. Per un flusso di lavoro di tracciamento del desktop con strumenti di pulizia diretta, consulta Inkscape Trace Bitmap.

Mantieni insieme l'immagine originale e l'SVG accettato. Annota qualsiasi correzione della tavolozza o regolazione della tela di cui avrà bisogno la persona successiva. Se vuoi provare la tua opera d'arte esistente in un altro strumento del browser, inizia gratuitamente con PerfectVector e controlla la silhouette e le aperture dell'anteprima.

Domande frequenti

SVGcode può tracciare un PNG in percorsi SVG reali?

SÌ. Il nostro PNG originale a colori piatti produceva markup SVG copiato contenente tre percorsi e nessuna immagine incorporata. Ispeziona il tuo file esportato; tale risultato non garantisce la stessa struttura o fedeltà per ogni immagine.

La disattivazione della posterizzazione preserva i colori originali?

Non è stato così nel nostro test controllato. Entrambe le impostazioni hanno modificato i valori originali del colore solido. Confronta i riempimenti esportati con la tavolozza desiderata e correggili quando il colore esatto è importante.

Perché la tela SVG è diversa dalla mia dimensione PNG?

L'SVG copiato nel nostro test utilizzava un viewBox 1024 × 1024 da un input 512 × 512. Ispeziona separatamente la tela esportata, i limiti della grafica e le dimensioni di visualizzazione previste anziché dare per scontato che le dimensioni dei pixel di origine verranno mantenute.

Come faccio a sapere che un'apertura è trasparente?

Posiziona uno sfondo contrastante dietro l'SVG salvato. Dovrebbe essere visibile attraverso l'apertura. In caso contrario, verificare se la traccia ha perso il contorno interno o ha creato una forma dipinta lì.

Fonti

1. app SVGcode: interfaccia di tracciamento delle immagini e controlli attuali.
2. Procedura dettagliata per l'autore di SVGcode su web.dev: tracciamento colore per colore, soppressione delle macchie e posterizzazione.
3. Repository ufficiale SVGcode: implementazione del progetto e documentazione sorgente.
4. Percorsi SVG W3C: percorsi composti, sottopercorsi e aperture.