Imagem para SVG

Sobre transformar uma imagem em SVG

Um PNG é uma grelha de píxeis. Amplie-o e fica com píxeis maiores. Um SVG é um conjunto de formas descritas com matemática, por isso mantém-se nítido em qualquer tamanho — num cartão de visita, num outdoor, num ecrã que ainda não existe.

O problema é que raramente se tem o SVG. Tem-se um logótipo que alguém enviou por email num PNG de 400 px, e agora ele tem de ir para um letreiro.

Esta ferramenta decalca a imagem em formas. Encontra os limites entre as cores e desenha verdadeiros traçados vetoriais ao longo deles, por isso o que sai é um SVG como deve ser: pode ser ampliado, recolorido e aberto em qualquer programa de desenho.

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

Vetorizar não é recuperar o ficheiro original. É desenhar à volta daquilo que se vê, e o resultado depende inteiramente do que lhe der.

Resulta bem em:

• Logótipos e marcas escritas com cores chapadas
• Ícones, símbolos e pictogramas
• Desenhos a traço, esboços e tinta-da-china
• Diagramas, mapas e plantas
• Estênceis, silhuetas e carimbos

Não resulta em fotografias. Uma foto não tem limites nítidos entre cores — tem milhões de transições graduais. Vetorizar isso dá milhares de manchinhas de cor: tecnicamente um SVG, normalmente *maior* do que a foto de onde veio, e sem préstimo nenhum. A ferramenta deteta o que parece ser uma foto e avisa, em vez de lhe entregar um ficheiro de 12 MB parecido com tinta entornada.

As definições

Comece por dizer o que é a imagem — Logótipo ou ícone, Desenho a traço ou Ilustração detalhada. Isso apenas coloca os três cursores num ponto de partida sensato; depois pode ajustar.

• O número de cores é o que mais pesa. A vetorização reduz a imagem a uma paleta pequena e desenha à volta de cada região. Um logótipo de duas cores vetorizado com 8 cores apanha a franja do antialiasing como formas extra; com 2, sai limpo. Menos cores é quase sempre melhor do que mais.
• A suavização endireita o tremelique que o antialiasing deixa ao longo de um contorno. Aumente-a se os contornos parecerem serrilhados; baixe-a se estiver a arredondar detalhe verdadeiro.
• O detalhe decide quão pequena pode ser uma forma antes de ser descartada. Baixe-o para deitar fora pintas e ruído; aumente-o para guardar traços finos num desenho intrincado.

Vetorize, veja o resultado à direita, ajuste e volte a vetorizar. São segundos.

Deixar o fundo de fora

Deixar o fundo de fora descarta a grande forma lisa por trás do desenho, de modo que o SVG fica com fundo transparente em vez de um retângulo branco.

Use-o para um logótipo que vai assentar na página de outra pessoa ou sobre um cabeçalho colorido. Deixe desmarcado se o fundo fizer mesmo parte do desenho.

Confira os contornos antes de usar

Amplie o painel vetorizado à direita. Os cantos que deviam ser vivos, as curvas que deviam ser suaves e o texto pequeno são os sítios onde a vetorização mostra os seus limites.

Se o resultado está quase certo mas confuso, experimente primeiro menos cores. Se o original for uma imagem muito pequena, a vetorização só pode adivinhar detalhe que nunca lá esteve — uma favicon de 64 px não se vai tornar um logótipo nítido.

Nada é enviado

A imagem é lida e vetorizada dentro do seu navegador. Nunca chega a um servidor, o que importa quando o ficheiro é um logótipo por lançar, a marca de um cliente ou trabalho sob acordo de confidencialidade.

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

Para que serve

• Um logótipo que só existe em PNG e agora tem de ir para sinalética ou impressão
• Um ícone que precisa de ser recolorido ou redimensionado por código
• Um esboço ou desenho a traço a ser preparado para corte, gravação ou bordado
• Um estêncil ou silhueta para uma máquina de corte de vinil ou um laser
• Transformar um diagrama em algo editável
• Obter um SVG para um site, onde fica nítido em qualquer ecrã

Bom saber

• O SVG tem uma viewBox correta, por isso escala bem quando define uma largura em CSS ou HTML
• Copiar o código SVG põe a marcação na área de transferência, pronta a colar numa página ou num componente
• O resultado abre no Illustrator, Inkscape, Figma e Affinity, onde os traçados podem ser editados à mão
• Milhares de formas significam que as definições não servem para esta imagem, não que a ferramenta falhou — reduza as cores
• Para o sentido contrário, use SVG para PNG ou SVG para JPG
• Para tirar o fundo a uma foto, use Remover fundo

Como usar

• Clique em Clique para carregar, ou arraste o logótipo ou desenho para a caixa
• Escolha o que é: Logótipo ou ícone, Desenho a traço ou Ilustração detalhada
• Carregue em Vetorizar e veja o resultado à direita
• Se os contornos estiverem confusos, ajuste primeiro o número de cores e vetorize outra vez
• Marque Deixar o fundo de fora se precisar de transparência
• Carregue em Descarregar SVG, ou em Copiar o código SVG para o colar diretamente numa página

Ferramentas relacionadas

• SVG para PNG — o sentido contrário
• SVG para JPG — um SVG como imagem lisa
• Remover fundo — recortar um motivo de uma foto
• Ampliar imagem — aumentar um bitmap sem o vetorizar
• Gerador de favicon — transformar o resultado no ícone de um site
• Comprimir imagem — quando afinal o bitmap era a resposta certa