Vectoritzador d'imatge a SVG

Com convertir una imatge a SVG

1. Deixa anar una imatge PNG, JPG, WebP o GIF a la zona de càrrega, o fes-hi clic per triar-ne una. L’original apareix a l’esquerra.
2. Tria un Perfil: - Logotip (colors plans, formes netes) per a logotips, icones, segells i il·lustracions planes; - Detallat (més colors i traçats) per a dibuixos amb ombres o molts colors; - Posteritzat (4 colors suavitzats) per obtenir un resultat estilitzat, semblant a un cartell, a partir d’una foto.
3. Ajusta el Nombre de colors (de 2 a 64) i Ignora les taques més petites de (px) si cal. El perfil omple valors raonables per a tots dos.
4. Tria una Mida de treball (costat més llarg). La imatge es vectoritza amb aquesta mida; l’SVG en si conserva les dimensions originals.
5. Fes clic a Vectoritza a SVG. El resultat apareix a la dreta amb la mida del fitxer, el nombre de traçats i de colors, i el temps que ha trigat la vectorització.
6. Fes clic a Baixa l’SVG, o a Copia el codi SVG per enganxar el marcatge al teu HTML o a l’eina de disseny.

Com funciona la vectorització

Aquesta eina fa servir imagetracerjs, un vectoritzador de codi obert, en tres passos:

1. Quantització de colors: la imatge es redueix al nombre de colors que has triat. Cada píxel s’assigna al color de la paleta més proper, i la paleta es refina en diverses passades.
2. Detecció de vores: per a cada color se segueixen els contorns de totes les àrees d’aquell color, inclosos els forats (com l’interior d’una «O»).
3. Ajust de traçats: els contorns se simplifiquen en línies rectes i corbes quadràtiques, que esdevenen elements <path> a l’SVG.

Les àrees més petites que el llindar Ignora les taques més petites de (px) es descarten, cosa que elimina soroll i artefactes de JPG. Un valor de 0 ho conserva tot; entre 8 i 20 va bé per a logotips; els valors més grans donen un dibuix més net però més simple. Les àrees totalment transparents s’eliminen, de manera que un logotip sobre fons transparent continua sent transparent.

Què dona bons resultats

La vectorització funciona millor amb logotips i dibuixos senzills: pocs colors plans, vores clares, sense degradats. Un esbós escanejat, una signatura en blanc i negre o una icona de pixel art es vectoritzen molt bé amb 2 a 8 colors.

Les fotos són una altra història. Una foto conté milers de tons subtils; per tant, una versió vectorial fidel necessita molts colors i desenes de milers de traçats, i l’SVG acaba pesant molt més que el JPG. Fes servir Posteritzat (4 colors suavitzats) per a un efecte artístic i no esperis un resultat fotogràfic. Si l’SVG es fa molt gran, l’eina t’avisa.

Consells per obtenir un logotip més net:

• parteix de la versió més gran i més nítida de la imatge que tinguis;
• posa el Nombre de colors al nombre real de colors del logotip (inclòs el fons);
• puja el llindar de taques si veus petits punts al voltant de les vores.

Privadesa i seguretat de la vista prèvia

La imatge es vectoritza al teu navegador i no es puja mai. La vista prèvia de l’SVG es mostra com una imatge normal des d’una adreça blob privada, mai inserida a la pàgina, de manera que ni un fitxer estrany pot executar codi.