O que significa vetorizar uma imagem

Uma imagem raster, como um PNG, JPG ou WebP, é uma grade de pixels, cada um com uma cor. Quando você amplia, os pixels ficam maiores e as bordas borram ou ficam quadriculadas. Uma imagem vetorial descreve a figura com caminhos e preenchimentos: contornos feitos de linhas e curvas, e a cor dentro de cada um. O renderizador desenha esses contornos no tamanho que você pedir, então as bordas continuam nítidas.

Vetorizar é passar do primeiro tipo de imagem para o segundo. "Raster para vetor", "imagem para vetor" e "PNG para vetor" são nomes para o mesmo trabalho: o traçado, que encontra as áreas de cor nos pixels e contorna cada uma como um caminho.

Um SVG que só embrulha o PNG original num elemento <image> não foi vetorizado. Ele abre como SVG, mas continua borrando quando ampliado, porque a imagem lá dentro ainda é feita de pixels. Como diferenciar um vetor de verdade de um PNG embrulhado.

Como o png2svg.art vetoriza uma imagem

  1. Escolhe um pequeno conjunto de cores chapadas, até o número que você definir, a partir do interior sólido das formas, não das bordas suaves.
  2. Atribui cada pixel a uma dessas cores. Num PNG ou WebP, os pixels menos da metade opacos não entram em nenhuma cor e continuam transparentes.
  3. Traça as cores juntas, então onde duas cores se encontram elas compartilham uma única borda, feita de segmentos retos e curvas de Bézier.
  4. Agrupa o resultado por objeto (primeiro o fundo, depois cada objeto separado) e grava cada forma como um <path> próprio, preenchido com sua cor, aninhado de acordo com o que envolve o quê (um olho dentro de um rosto). Os furos, como o miolo de um "O", continuam vazados.
  5. Antes de você receber o resultado, verifica se ele tem só caminhos vetoriais, sem bitmap embutido e sem scripts.

O traçado não é IA. Ele não inventa detalhes nem redesenha sua imagem num estilo novo; ele contorna as cores que já estão lá.

Quando funciona e quando não funciona

Imagens que ficam boas vetorizadas:

  • logos, ícones e line art;
  • figurinhas, clip-art e ilustrações flat;
  • arte de IA em estilo flat, com poucas cores sólidas (imagem de IA para SVG).

Imagens que não ficam:

  • Fotos, degradês e sombras suaves. Saem como faixas de cor chapada, como um pôster, porque cada traçado tem no máximo 24 cores. Por que fotos ficam posterizadas.
  • Textos pequenos. Letras com menos de uns 10 px de altura não ficam limpas no traçado. Digite-as de novo com uma fonte num editor vetorial e coloque por cima do traçado.
  • Imagens pequenas ou borradas. O traçado não adiciona resolução, então os contornos saem mais arredondados e suaves do que o design que você tinha em mente.

Vetorize uma imagem em quatro passos

  1. Envie um PNG, JPG, WebP ou HEIC de até 25 MB, na caixa desta página ou no conversor.
  2. Escolha uma predefinição e mova o controle Cores, até para o número de cores que você enxerga.
  3. Confira a prévia grátis com marca d'água, sem cadastro, e trace de novo se as formas não estiverem certas.
  4. Desbloqueie o SVG limpo por 1 crédito (3 créditos grátis com uma conta) e baixe.

Cada configuração é explicada, junto com o mesmo trabalho no Inkscape e no Illustrator, em como converter PNG para SVG, passo a passo.

Perguntas

Imagem para vetor é o mesmo que PNG para SVG?

Praticamente. SVG é o formato vetorial usado na web e pelos softwares de corte, e é o único formato que o traçador do png2svg.art gera, então vetorizar uma imagem aqui sempre resulta num SVG.

Dá para vetorizar uma foto?

Dá, mas ela sai como áreas de cor chapada, com até 24 cores, e não como um vetor fotorrealista. Isso pode ser exatamente o que você quer para um visual de pôster ou de estêncil.

O que quer dizer raster para vetor?

Transformar uma grade de pixels em caminhos: traçar as áreas de cor de uma imagem raster e contornar cada uma, para o resultado poder ser ampliado sem borrar.

É grátis?

A prévia com marca d'água é grátis e sem cadastro (5 por dia como visitante). Um SVG limpo custa 1 crédito (3 créditos grátis com uma conta).

Dá para editar o vetor depois?

Dá. Cada objeto é uma camada com as formas dele como caminhos, e você pode recolorir, mover, remodelar ponto por ponto ou ocultar qualquer um deles no editor de SVG, que exige uma conta. O editor também une, subtrai e faz a interseção de formas; para deslocar um contorno (offset), use um editor vetorial de computador, como o Inkscape.