Converter imagem em SVG (vetorizar)

Como converter uma imagem em SVG

1. Larga uma imagem PNG, JPG, WebP ou GIF na zona de largar, ou clica nela para escolher uma. O original aparece à esquerda.
2. Escolhe uma Predefinição: - Logótipo (cores lisas, formas limpas) para logótipos, ícones, carimbos e ilustrações planas; - Detalhado (mais cores e caminhos) para desenhos com sombreados ou muitas cores; - Posterizado (4 cores suavizadas) para um resultado estilizado, tipo cartaz, a partir de uma foto.
3. Ajusta o Número de cores (de 2 a 64) e Ignorar manchas mais pequenas do que (px), se for preciso. A predefinição preenche valores sensatos para os dois.
4. Escolhe um Tamanho de trabalho (lado maior). A imagem é vetorizada com esse tamanho; o SVG em si mantém as dimensões originais.
5. Clica em Vetorizar em SVG. O resultado aparece à direita com o tamanho do ficheiro, o número de caminhos e de cores e o tempo que a vetorização demorou.
6. Clica em Transferir SVG, ou em Copiar código SVG para colar o código no teu HTML ou programa de design.

Como funciona a vetorização

Esta ferramenta usa o imagetracerjs, um vetorizador de código aberto, em três passos:

1. Quantização de cores: a imagem é reduzida ao número de cores que escolheste. Cada píxel é atribuído à cor mais próxima da paleta, e a paleta é afinada ao longo de várias passagens.
2. Deteção de contornos: para cada cor, são seguidos os contornos de todas as zonas dessa cor, incluindo os buracos (como o interior de um «O»).
3. Ajuste dos caminhos: os contornos são simplificados em linhas retas e curvas quadráticas, que se tornam elementos <path> no SVG.

As zonas mais pequenas do que o limite Ignorar manchas mais pequenas do que (px) são eliminadas, o que remove ruído e artefactos JPG. Um valor de 0 mantém tudo; entre 8 e 20 é bom para logótipos; valores maiores dão um desenho mais limpo, mas mais simples. As zonas totalmente transparentes são removidas, por isso um logótipo com fundo transparente continua transparente.

O que dá bons resultados

A vetorização funciona melhor com logótipos e desenhos simples: poucas cores lisas, contornos nítidos, sem degradês. Um esboço digitalizado, uma assinatura a preto e branco ou um ícone em pixel art vetorizam muito bem com 2 a 8 cores.

As fotos são outra história. Uma foto contém milhares de tons subtis, por isso uma versão vetorial fiel precisa de muitas cores e de dezenas de milhares de caminhos, e o SVG acaba por ficar muito mais pesado do que o JPG. Em vez disso, usa Posterizado (4 cores suavizadas) para um efeito artístico, e não esperes um resultado fotográfico. Se o SVG ficar muito grande, a ferramenta avisa-te.

Dicas para um logótipo mais limpo:

• parte da versão maior e mais nítida da imagem que tiveres;
• define o Número de cores como o número real de cores do logótipo (incluindo o fundo);
• aumenta o limite das manchas se vires pequenos pontos à volta dos contornos.

Privacidade e pré-visualização segura

A imagem é vetorizada no teu navegador e nunca é enviada. A pré-visualização do SVG é mostrada como uma simples imagem a partir de um endereço blob privado, nunca inserida na página, por isso nem um ficheiro invulgar consegue executar código.