Immagine in SVG

Trasformare un'immagine in SVG

Un PNG è una griglia di pixel. Se lo ingrandisci ottieni pixel più grandi. Un SVG è un insieme di forme descritte con la matematica, quindi resta nitido a qualsiasi dimensione: su un biglietto da visita, su un cartellone, su uno schermo che ancora non esiste.

Il problema è che l'SVG quasi mai ce l'hai. Hai un logo che qualcuno ti ha mandato per email come PNG da 400 px, e ora deve finire su un'insegna.

Questo strumento ricalca l'immagine trasformandola in forme. Trova i bordi fra i colori e traccia veri tracciati vettoriali lungo di essi, così quello che esce è un SVG come si deve: lo puoi scalare, ricolorare e aprire in qualsiasi programma di grafica.

Cosa può e cosa non può fare la vettorializzazione

Vettorializzare non significa recuperare il file originale. Significa disegnare intorno a ciò che si vede, e il risultato dipende interamente da cosa gli dai in pasto.

Funziona bene su:

• Loghi e marchi testuali a colori piatti
• Icone, simboli e pittogrammi
• Disegni a tratto, schizzi e chine
• Diagrammi, mappe e planimetrie
• Mascherine, sagome e timbri

Non funziona sulle fotografie. Una foto non ha bordi netti fra i colori: ne ha milioni sfumati. La vettorializzazione li trasforma in migliaia di macchioline colorate: tecnicamente un SVG, di solito *più pesante* della foto da cui è nato, e buono a nulla. Lo strumento riconosce quella che sembra una foto e te lo dice, invece di consegnarti un file da 12 MB che sembra vernice rovesciata.

Le impostazioni

Comincia dicendo che cos'è l'immagine — Logo o icona, Disegno a tratto o Illustrazione dettagliata. Questo si limita a portare i tre cursori a un punto di partenza sensato; poi puoi regolare.

• Il numero di colori è quello che conta di più. La vettorializzazione riduce l'immagine a una piccola tavolozza e disegna intorno a ogni regione. Un logo a due colori ricalcato con 8 colori raccoglie l'alone dell'antialiasing come forme in più; con 2 esce pulito. Meno colori è quasi sempre meglio di più.
• La levigatura raddrizza il tremolio che l'antialiasing lascia lungo un bordo. Alzala se i contorni sembrano frastagliati; abbassala se viene arrotondato del dettaglio vero.
• Il dettaglio decide quanto piccola può essere una forma prima di essere scartata. Abbassalo per buttare via puntini e rumore; alzalo per conservare i tratti sottili di un disegno intricato.

Vettorializza, guarda il risultato a destra, regola, rifallo. Sono questione di secondi.

Lasciare fuori lo sfondo

Lasciare fuori lo sfondo scarta la grande forma piatta dietro al disegno, così l'SVG ha uno sfondo trasparente invece di un rettangolo bianco.

Usalo per un logo che deve stare sulla pagina di qualcun altro o su un'intestazione colorata. Lascialo disattivato se lo sfondo fa davvero parte del disegno.

Controlla i bordi prima di usarlo

Ingrandisci il pannello vettorializzato a destra. Gli angoli che dovrebbero essere vivi, le curve che dovrebbero essere morbide e i testi piccoli sono i punti in cui la vettorializzazione mostra i suoi limiti.

Se il risultato è quasi giusto ma confuso, prova prima con meno colori. Se l'originale è un'immagine molto piccola, la vettorializzazione può solo indovinare un dettaglio che non c'è mai stato: una favicon da 64 px non diventerà un logo nitido.

Non viene caricato nulla

L'immagine viene letta e vettorializzata dentro il tuo browser. Non raggiunge mai un server, cosa che conta quando il file è un logo non ancora pubblicato, il marchio di un cliente o un lavoro sotto riservatezza.

Significa anche nessun limite di dimensione e nessuna attesa. Le immagini molto grandi vengono ridotte prima della vettorializzazione, perché oltre un certo punto i pixel in più aggiungono solo rumore, non dettaglio.

A cosa serve

• Un logo che esiste solo come PNG e ora deve andare su insegne o in stampa
• Un'icona da ricolorare o ridimensionare via codice
• Uno schizzo o disegno a tratto da preparare per taglio, incisione o ricamo
• Una mascherina o sagoma per un plotter da taglio o un laser
• Trasformare un diagramma in qualcosa di modificabile
• Ottenere un SVG per un sito web, dove resta nitido su qualunque schermo

Buono a sapersi

• L'SVG ha una viewBox corretta, quindi si scala bene quando imposti una larghezza in CSS o HTML
• Copia il codice SVG mette il markup negli appunti, pronto da incollare in una pagina o in un componente
• Il risultato si apre in Illustrator, Inkscape, Figma e Affinity, dove i tracciati si modificano a mano
• Migliaia di forme vogliono dire che le impostazioni non vanno bene per questa immagine, non che lo strumento abbia fallito: riduci i colori
• Per la direzione opposta usa Da SVG a PNG o Da SVG a JPG
• Per togliere invece lo sfondo a una foto, usa Rimuovi sfondo

Come si usa

• Clicca su Clicca per caricare, oppure trascina il logo o il disegno sul riquadro
• Scegli che cos'è: Logo o icona, Disegno a tratto o Illustrazione dettagliata
• Premi Vettorializza e guarda il risultato a destra
• Se i bordi sono confusi, regola prima il numero di colori e rifai la vettorializzazione
• Spunta Lasciare fuori lo sfondo se ti serve la trasparenza
• Premi Scarica l'SVG, oppure Copia il codice SVG per incollarlo direttamente in una pagina

Strumenti collegati

• Da SVG a PNG — la direzione opposta
• Da SVG a JPG — un SVG come immagine piatta
• Rimuovi sfondo — ritagliare un soggetto da una foto
• Ingrandisci immagine — ingrandire un bitmap senza vettorializzarlo
• Generatore di favicon — trasformare il risultato nell'icona di un sito
• Comprimi immagine — quando alla fine il bitmap era la risposta giusta