Imagem para SVG

Sobre transformar uma imagem em SVG

Um PNG é uma grade de pixels. Dê zoom e você só ganha pixels maiores. Um SVG é um conjunto de formas descritas com matemática, então ele fica nítido em qualquer tamanho — em um cartão de visita, em um outdoor, em uma tela que ainda nem existe.

O problema é que quase nunca a gente tem o SVG. A gente tem um logo que alguém mandou por e-mail em um PNG de 400 px, e agora ele precisa ir para uma fachada.

Esta ferramenta contorna a imagem com formas. Ela encontra os limites entre as cores e desenha caminhos vetoriais de verdade ao longo deles, então o que sai é um SVG de verdade: dá para ampliar, mudar as cores e abrir em qualquer programa de desenho.

O que a vetorização consegue e não consegue fazer

Vetorizar não é recuperar o arquivo original. É desenhar em volta do que aparece na imagem, e o resultado depende totalmente do que você enviar.

Funciona bem com:

• Logos e logotipos escritos com cores chapadas
• Ícones, símbolos e pictogramas
• Desenhos de traço, rascunhos e nanquim
• Diagramas, mapas e plantas
• Estênceis, silhuetas e carimbos

Não funciona com fotos. Uma foto não tem limites nítidos entre as cores — tem milhões de transições graduais. Vetorizar isso gera milhares de manchinhas de cor: tecnicamente um SVG, normalmente *maior* do que a foto de origem, e sem utilidade nenhuma. A ferramenta detecta o que parece ser uma foto e avisa, em vez de te entregar um arquivo de 12 MB que parece tinta derramada.

As configurações

Comece dizendo o que é a imagem — Logo ou ícone, Desenho de traço ou Ilustração detalhada. Isso só coloca os três controles em um ponto de partida razoável; depois você pode ajustar.

• O número de cores é o que mais pesa. A vetorização reduz a imagem a uma paleta pequena e desenha em volta de cada região. Um logo de duas cores vetorizado com 8 cores pega a borda do antialiasing como formas extras; com 2, sai limpo. Menos cores quase sempre é melhor do que mais.
• A suavização acerta a tremidinha que o antialiasing deixa ao longo de um contorno. Aumente se os contornos parecerem serrilhados; diminua se ela estiver arredondando detalhes reais.
• O detalhe define o tamanho mínimo de uma forma antes de ela ser descartada. Diminua para jogar fora pontinhos e ruído; aumente para manter traços finos em um desenho complexo.

Vetorize, veja o resultado à direita, ajuste e vetorize de novo. Leva segundos.

Deixar o fundo de fora

Deixar o fundo de fora descarta a grande forma lisa atrás do desenho, então o SVG fica com fundo transparente em vez de um retângulo branco.

Use para um logo que vai ficar na página de outra pessoa ou em cima de um cabeçalho colorido. Deixe desmarcado se o fundo faz parte do desenho.

Confira os contornos antes de usar

Dê zoom no painel vetorizado à direita. Cantos que deveriam ser retos, curvas que deveriam ser suaves e texto pequeno são os lugares onde a vetorização mostra os seus limites.

Se o resultado está quase certo, mas bagunçado, tente primeiro menos cores. Se o original for uma imagem muito pequena, a vetorização só pode adivinhar detalhes que nunca estiveram lá — um favicon de 64 px não vai virar um logo nítido.

Nada é enviado

A imagem é lida e vetorizada dentro do seu navegador. Ela nunca chega a um servidor, o que importa quando o arquivo é um logo ainda não lançado, a marca de um cliente ou um trabalho sob acordo de confidencialidade.

Isso também quer dizer que não há limite de tamanho nem fila de espera. Imagens muito grandes são reduzidas antes da vetorização, porque a partir de certo ponto os pixels extras só acrescentam ruído, não detalhe.

Para que serve

• Um logo que só existe em PNG e agora precisa ir para uma placa ou para a gráfica
• Um ícone que precisa ter a cor ou o tamanho mudados por código
• Um rascunho ou desenho de traço que vai ser preparado para corte, gravação ou bordado
• Um estêncil ou silhueta para uma plotter de recorte ou uma máquina a laser
• Transformar um diagrama em algo editável
• Ter um SVG para um site, onde ele fica nítido em qualquer tela

Bom saber

• O SVG tem uma viewBox correta, então ele escala bem quando você define uma largura em CSS ou HTML
• Copiar o código SVG coloca o código na área de transferência, pronto para colar em uma página ou em um componente
• O resultado abre no Illustrator, Inkscape, Figma e Affinity, onde os caminhos podem ser editados à mão
• Milhares de formas querem dizer que as configurações não servem para essa imagem, não que a ferramenta falhou — reduza as cores
• Para o caminho inverso, use SVG para PNG ou SVG para JPG
• Para tirar o fundo de uma foto, use Remover fundo

Como usar

• Clique em Clique para enviar ou arraste o logo ou desenho para a caixa
• Escolha o que é: Logo ou ícone, Desenho de traço ou Ilustração detalhada
• Clique em Vetorizar e veja o resultado à direita
• Se os contornos estiverem bagunçados, ajuste primeiro o número de cores e vetorize de novo
• Marque Deixar o fundo de fora se você precisar de transparência
• Clique em Baixar SVG, ou em Copiar o código SVG para colar direto em uma página

Ferramentas relacionadas

• SVG para PNG — o caminho inverso
• SVG para JPG — um SVG como imagem comum
• Remover fundo — recorte o objeto principal de uma foto
• Aumentar imagem — amplie um bitmap sem vetorizar
• Gerador de favicon — transforme o resultado no ícone de um site
• Compressor de imagens — quando, no fim das contas, o bitmap era a resposta certa