Il codice di questa pagina non è partito.

Se apri index.html direttamente da una cartella, i moduli JavaScript restano bloccati, quindi non succederà niente quando sceglierai un'immagine. Servi invece la cartella via http: 

powershell -ExecutionPolicy Bypass -File serve.ps1

Poi apri http://localhost:8080/.

Immagine in SVG — ricalcare un logo, uno stencil o una silhouette in curve

Una forma, un contorno. Indica quello che non dovrebbe esserci.

Italiano
Vedi il codice
Qui non si caricano immagini, mai. Non c'è nessun server.

L'immagine viene letta dal disco dal tuo browser, ridotta a un bit per pixel da src/mask.js, percorsa lungo il bordo da src/contour.js e rivestita di curve da src/fit.js — circa seicento righe che puoi leggere, senza nessun motore dietro e niente da scaricare per farle girare. Questo strumento non ha nessuna funzione di rete: niente da prendere, niente da mandare, e nessun server dall'altra parte di questa pagina a cui mandare un disegno anche se ci fosse.

Verifica dal vivo: verifica in corso…

Offline: verifica in corso…

Non fidarti della nostra parola: apri i DevTools, guarda la scheda Rete e ricalca qualcosa. Nemmeno una richiesta porta un'immagine, una miniatura, un nome di file o un byte di quello che hai scelto. Oppure stacca internet e ricalcane una lo stesso.

1 Scegli l'immagine

2 Di' che cos'è la forma

Il ricalco ha bisogno di un bit per pixel — dentro, o fuori. Ci sono due modi per deciderlo, e vanno bene per immagini diverse. Un disegno su carta bianca si separa per chiaro e scuro. La foto di un oggetto no: una figura rosso scuro su pietra grigio scuro è scuro su scuro, e nessuna luminosità le separa. Quella vuole il soggetto, che ricava che cos'è lo sfondo dai bordi dell'immagine e tiene tutto quello che non lo è.

3 Controlla il contorno e sistema quello che ha sbagliato

La linea rossa è il contorno così com'è adesso, disegnato sopra i pixel da cui è venuto — l'unico posto in cui la questione si può decidere, perché un contorno è giusto o sbagliato rispetto a quei pixel e a nient'altro. Trascina una delle due immagini per spostarle entrambe, gira la rotellina per ingrandire, e clicca qualsiasi cosa che non dovrebbe esserci. Un clic prende tutta la macchia di quel colore, quindi stai indicando una forma e non un pixel; cliccala di nuovo per rimetterla.

Calcolalo per forma Quanto la linea può allontanarsi dai pixel. Sotto circa uno non fa niente del tutto, perché un gradino della scala sta un pixel intero fuori dalla linea a cui appartiene; sopra circa due comincia a mangiarsi curve vere.

Nettezza degli angoli Quanto il contorno deve girare perché quella svolta resti un angolo invece di venire arrotondata in una curva. Troppo basso, e ogni tremolio è un angolo e un cerchio torna come un poligono.

L'immagine

L'SVG

Quanto deve essere levigata la linea

Due numeri decidono come la scala di pixel diventa curve. Nessuno dei due va toccato per la maggior parte delle immagini, ed entrambi vale la pena conoscerli per quando serve.

4 Prendi l'SVG

Vedi come Markdown

Come ricalcare un'immagine in un SVG senza caricarla
  1. Scegli l'immagine. Un logo, uno stencil, una firma, un timbro, un disegno scansionato, una silhouette. Qualsiasi cosa con una forma chiara dentro si ricalca bene; la foto di una stanza no, e più in basso c'è un avviso chiaro invece di una sorpresa alla fine. Il file viene letto direttamente dal tuo disco e intanto niente viene mandato da nessuna parte.
  2. Di' che cos'è la forma. Un disegno su carta si separa per chiaro e scuro, e il livello viene calcolato per te. La foto di un oggetto no — una figura rosso scuro su pietra grigio scuro è scuro su scuro, e nessuna luminosità le separa. Quella vuole il soggetto, che impara che cos'è lo sfondo da una fascia lungo il bordo dell'immagine e tiene tutto quello che non lo è.
  3. Guarda la linea rossa, non le impostazioni. Il contorno viene disegnato sopra i pixel da cui è venuto, perché è l'unico posto in cui la questione si può decidere: un contorno è giusto o sbagliato rispetto a quei pixel e a nient'altro. Trascina una delle due immagini per spostarle entrambe, e gira la rotellina per ingrandire abbastanza da vedere cosa fa davvero la linea.
  4. Togli con un clic quello che non dovrebbe esserci. Un puntino, una graffetta, un timbro, una didascalia, un'ombra. Un clic prende tutta la macchia di quel colore invece di un pixel, quindi stai indicando una forma; cliccala di nuovo per rimetterla. Cliccare un pezzo di sfondo chiuso lo riempie invece, ed è così che un buco che non dovrebbe essere un buco si chiude.
  5. Regola la levigatura solo se serve. Dettaglio è quanto la linea può allontanarsi dai pixel mentre viene semplificata, e viene calcolato per forma a meno che tu non dica altrimenti. Nettezza degli angoli decide quanto il contorno deve girare perché quella svolta resti un angolo invece di venire arrotondata. La maggior parte delle immagini non ha bisogno di toccare né l'uno né l'altra.
  6. Prendi l'SVG. Un file, un solo <path>, nessuna regola di riempimento di cui preoccuparsi: i contorni girano in un verso e i buchi nell'altro, ed è questo che fa di una forma con quaranta buchi un solo elemento. Si apre in Illustrator, Inkscape, Figma, un browser e una macchina da taglio.

La versione lunga

Come ricalcare un'immagine in un SVG Trasforma un logo, uno stencil, una firma o una silhouette in un vero contorno vettoriale nel browser. Quali immagini si ricalcano bene, quali non lo faranno mai, e come sistemare le parti che il ricalco sbaglia.

Domande

La mia immagine viene caricata da qualche parte?

No. Il file viene letto dal tuo browser sul tuo hardware, ricalcato da poche centinaia di righe di JavaScript servite da questa origine, e restituito come download. Questo strumento non ha nessuna funzione di rete — non va mai a prendere niente e non manda mai niente — e la Content-Security-Policy della pagina elenca ogni indirizzo che può contattare, nessuno dei quali appartiene a questo sito.

Trasformerà la mia fotografia in un SVG?

Non in modo utile, e la pagina te lo dirà invece di lasciartelo scoprire dopo il download. Il ricalco trasforma ogni macchia di colore simile in una forma a sé, quindi una fotografia torna come migliaia di chiazze sovrapposte e un file molte volte più grande del JPEG, che si apre lentamente e non somiglia alla fotografia. Quello che si ricalca bene è un'immagine con una forma dentro: un logo, uno stencil, una firma, un disegno al tratto, una silhouette. Per la fotografia di un solo oggetto, l'impostazione il soggetto lo ritaglierà come un'unica silhouette piena, che è una cosa diversa e davvero utile.

Qual è la differenza tra i due modi di trovare la forma?

La domanda che fanno. Chiaro e scuro chiede se ogni pixel è più scuro di un livello, che è esattamente giusto per inchiostro su carta e inutile quando il soggetto e lo sfondo sono ugualmente scuri. Il soggetto chiede che cos'è lo sfondo — lo impara da una fascia lungo il bordo dell'immagine, misura ogni pixel rispetto a quello e tiene la cosa più grande che non lo è. Funziona sulla fotografia di un oggetto su uno sfondo più o meno uniforme, e fallisce su un'immagine ritagliata così stretta che il soggetto esce da tre lati, perché i bordi da cui impara sono allora il soggetto stesso. Quando succede, puoi indicare tu lo sfondo al suo posto.

Perché la forma ricalcata ha dei buchi, o perde le parti sottili?

Perché li aveva l'immagine, una volta diventata un bit per pixel. Attiva cosa ha ricevuto il ricalco per vederlo: sotto circa dodici pixel l'occhio di una lettera si è già riempito e le sue aste si sono già fuse, e nessun ricalco recupera un buco che non c'è. I rimedi stanno a monte — sposta la soglia, o parti da una scansione più grande. In modalità il soggetto, chiudi i vuoti fino a sigilla i buchi piccoli e riempilo tutto chiude ogni buco che lo sfondo non riesce a raggiungere dal bordo dell'immagine.

Posso sistemare le parti che ha sbagliato?

Sì, ed è a questo che serve quasi tutto il terzo passo. Clicca qualsiasi cosa che non dovrebbe stare nel disegno e sparisce; cliccala di nuovo e torna. Un clic prende tutta la macchia di quel colore, quindi un clic toglie un puntino intero o un timbro intero invece di un pixel. Cliccare un pezzo di sfondo chiuso lo riempie. Le correzioni vengono tenute separate dalla soglia, quindi spostare il cursore dopo non le butta via.

Quanto sarà grande l'SVG?

Per una forma, meno dell'immagine: una silhouette ricalcata di solito pesa da uno a cinque kilobyte, e un logo qualcuno in più. La pagina te lo dice esattamente, accanto al download. Per una fotografia sarà enorme, che è il segno più chiaro che è lo strumento sbagliato per quel file — e la pagina smette di disegnare e lo dice oltre circa un migliaio di forme separate.

Ricalca a colori?

No. Questo fa una forma di un solo colore, che è il caso che viene fuori come un disegno invece che come una brutta fotocopia. Ricalcare a colori vuol dire quantizzare a pochi colori e ricalcare ciascuno come un livello a sé, e il risultato delude quasi tutti quelli che lo chiedono. Se ti serve il colore, ricalca la forma qui e riempila nel tuo programma di disegno.

Cosa posso fare con l'SVG dopo?

Scalarlo a qualsiasi dimensione senza che diventi sfocato, ricolorarlo con un solo attributo, animarlo, stamparlo, o mandarlo a una macchina da taglio o a un laser. È un solo <path> senza regola di riempimento da sbagliare, quindi Illustrator, Inkscape, Figma, un browser e quasi tutti i software CNC lo leggono allo stesso modo.

C'è un limite alla dimensione dell'immagine?

Quello della tua macchina, non il nostro. Una pagina A4 scansionata a 300 dpi — circa nove megapixel — si ricalca in una frazione di secondo. Le immagini più grandi funzionano; ci mettono solo di più, e il lavoro avviene sul tuo processore invece che in una coda da qualche parte.

È gratis, e mi serve un account?

È gratis, e non c'è nessun account, nessun accesso, nessuna prova e nessuna filigrana. Non c'è nemmeno un limite al numero o alla dimensione dei file, perché non c'è nessun server che li paga — il lavoro avviene sulla tua macchina. Il sito ha della pubblicità, ed è quella che lo paga; agli annunci non viene dato niente sui tuoi file.

Funziona offline?

Sì. Carica la pagina una volta, poi stacca internet e continua a funzionare. È anche il modo più semplice per dimostrare che non viene caricato niente: uno strumento che mandasse via la tua immagine per ricalcarla si fermerebbe nel momento in cui stacchi la spina.