Como Vetorizar uma Imagem em 3 Passos
- Envie a imagem (PNG, JPG, WebP, BMP ou TIFF) no conversor acima.
- Converta. O vtracer a vetoriza em cores; imagens com mais de 1.200 px de largura são reduzidas para 1.200 px antes.
- Baixe o SVG e faça os ajustes no Inkscape, Illustrator ou Figma: apague manchas soltas, junte formas, mude as cores.
Isso também funciona no celular: abra a página no navegador do aparelho e envie a imagem.
O Que É Vetorização?
A vetorização (também chamada de rastreamento) é o processo de converter uma imagem raster — uma grade de pixels coloridos — em uma imagem vetorial — um conjunto de curvas e formas matemáticas. As duas representações são fundamentalmente diferentes:
- Raster (PNG, JPG, BMP): Cada pixel armazena um valor de cor. A imagem tem uma resolução fixa. Ampliá-la além dessa resolução produz resultados borrados e interpolados.
- Vetor (SVG, AI, EPS): As formas são definidas por equações matemáticas — curvas Bézier, linhas, arcos. O mecanismo de renderização recalcula a matemática em qualquer tamanho de destino, produzindo nitidez perfeita de um favicon de 16 pixels a um outdoor de 10 metros.
A vetorização não é uma simples conversão de formato como PNG para JPEG. É uma reconstrução: o software analisa os limites dos pixels, detecta bordas e constrói uma representação matemática completamente nova que aproxima a imagem original. A qualidade dessa aproximação depende muito das características da imagem fonte.
Nosso Pipeline de Conversão
Quando você faz upload de um PNG (ou JPG, BMP, WebP, TIFF) para o CleverUtils e converte para SVG, o arquivo passa por um pipeline de múltiplos estágios. Entender cada estágio explica por que certas imagens vetorizam perfeitamente e outras produzem resultados inesperados.
Etapa 1: Decodificação e Redimensionamento (ImageMagick)
O ImageMagick decodifica o arquivo enviado (JPG, PNG, WebP, TIFF, PSD e outros formatos) e corrige a rotação EXIF. Imagens com mais de 1.200 px de largura são reduzidas para 1.200 px para manter a vetorização rápida. Entradas vetoriais ou em camadas, como PDF, EPS ou PSD, são primeiro achatadas sobre fundo branco.
Etapa 2: Agrupamento de Cores
O vetorizador, o vtracer, agrupa pixels vizinhos de cor semelhante em regiões. Nossas configurações mantêm 6 bits de precisão por canal de cor, então tons muito próximos se fundem em uma única cor chapada. É por isso que os gradientes viram faixas de cor sólida.
Manchas menores que 4 pixels são descartadas como ruído.
Etapa 3: Rastreamento de Bordas
O vtracer segue o contorno de cada região de cor. As regiões são empilhadas: as formas maiores ficam embaixo e as menores por cima, para que não haja lacunas entre cores vizinhas.
Etapa 4: Ajuste de Polígonos
Nosso conversor executa o vtracer no modo polígono: cada contorno vira uma cadeia de segmentos de reta, não curvas de Bézier. Mudanças de direção mais fechadas que 60° são mantidas como cantos. Os polígonos mantêm logotipos e letras nítidos; formas arredondadas parecem levemente facetadas quando você aplica muito zoom.
Etapa 5: Saída SVG
Cada região é gravada como um <path> SVG com uma cor de preenchimento sólida. O arquivo abre em qualquer navegador e no Inkscape, Illustrator, Figma e Cricut Design Space.
Comando: vtracer --input in.png --output out.svg --colormode color --hierarchical stacked --mode polygon --filter_speckle 4 --color_precision 6 --corner_threshold 60 --segment_length 3.5
Se o vtracer não conseguir processar um arquivo, o conversor recorre ao potrace, que gera um SVG em preto e branco.
O Que Vetoriza Bem
A vetorização funciona melhor quando a imagem é composta de poucas cores chapadas com bordas nítidas. Cada cor chapada vira uma forma limpa.
| Tipo de Fonte | Qualidade | Por Que Funciona |
|---|---|---|
| Logotipos em fundo branco | Excelente | Alto contraste, bordas limpas, cores sólidas |
| Arte linear e esboços | Excelente | Linhas de tinta/lápis fortes em papel branco |
| Ícones (design plano) | Excelente | Formas geométricas, cores uniformes, limites limpos |
| Texto e tipografia | Excelente | Bordas nítidas, preto uniforme sobre branco |
| Silhuetas | Excelente | Preto/branco puro, contornos limpos, sem detalhe interno |
| Carimbos e selos | Muito boa | Alto contraste, mas pode precisar de ajuste de limiar para áreas desbotadas |
| Diagramas técnicos | Muito boa | Linhas limpas, mas linhas muito finas podem precisar de limiar mais baixo |
| Designs desenhados à mão | Boa | Linhas de tinta fortes funcionam bem; traços leves de lápis podem desaparecer |
O fio condutor: alto contraste, bordas nítidas, faixa tonal limitada. Se a imagem permanece reconhecível quando reduzida a preto e branco puro, ela vetorizará bem.
O Que Vetoriza Mal
O agrupamento de cores falha em imagens com variação tonal contínua. Gradientes suaves se dividem em muitas faixas de cor chapada, o que dá um aspecto posterizado e deixa o SVG grande.
- Fotografias: retratos, paisagens e fotos de produtos contêm gradientes suaves em pele, céu, folhagem e tecidos. A vetorização transforma tudo em centenas de manchas de cor chapada, produzindo uma aparência posterizada. O arquivo SVG também pode ser enorme — milhares de caminhos minúsculos tentando aproximar variações tonais suaves.
- Gradientes suaves: céus ao pôr do sol, transições de cor, efeitos de vinheta e sombras são cortados em faixas discretas de cor chapada com limites dentados.
- Texturas complexas: tecido, veio de madeira, pelo, textura de papel — esses elementos geram uma quantidade enorme de caminhos vetoriais minúsculos que parecem ruidosos e não têm utilidade prática.
- Fontes de baixa resolução: uma miniatura de 100×100 pixels fornece tão poucos pontos de dados que o ajuste de curvas Bézier produz caminhos ásperos e angulosos. A saída parece irregular e grosseira independentemente do conteúdo da fonte.
- JPEGs com alta compressão: a compressão JPEG cria artefatos em blocos de 8×8 pixels ao redor das bordas. O vetorizador segue esses artefatos de compressão em vez das bordas reais da imagem, produzindo caminhos vetoriais ruidosos e dentados.
Regra geral: se a imagem continua legível quando reduzida a um punhado de cores chapadas, ela vetorizará bem. Se depende de sutileza tonal ou detalhes fotográficos, a vetorização não é a abordagem correta.
Dicas de Otimização de Qualidade
As maiores melhorias vêm de preparar a imagem fonte antes de fazer o upload, não de ajustar os parâmetros do potrace. Esses passos funcionam em qualquer editor de imagens.
Use a Maior Resolução Disponível
Mais pixels dão ao vetorizador mais dados de borda e contornos mais suaves, até certo ponto: o conversor desta página reduz imagens com mais de 1.200 px de largura para 1.200 px antes da vetorização. Uma fonte nítida com cerca dessa largura dá o melhor resultado; uma miniatura de 100 px gera caminhos ásperos e serrilhados.
Limpe a Imagem Fonte
Para imagens digitalizadas, remova ruídos de fundo e artefatos antes de fazer o upload. Use um ajuste de Níveis ou Curvas para levar o fundo ao branco puro e o primeiro plano ao preto puro. Remova manchas de poeira, textura de papel e artefatos de digitalização com um desfoque leve ou um filtro de remoção de ruído. Recorte bem justo para eliminar sombras nas bordas.
Aumente o Contraste
Aumente o controle de contraste. Um contraste mais forte significa uma diferença maior entre os valores de brilho do primeiro plano e do fundo, o que proporciona uma separação mais limpa para o limiar. Para imagens em P&B, a entrada ideal tem apenas dois tons: preto puro e branco puro, sem nada entre eles.
Use PNG, Não JPEG
A compressão JPEG cria artefatos em blocos visíveis ao redor das bordas nítidas — exatamente as áreas que o potrace analisa para rastrear bordas. Esses artefatos produzem caminhos vetoriais dentados e ruidosos que seguem os limites da compressão em vez das bordas reais da imagem. Se você tiver escolha, sempre use PNG. Se apenas JPEG estiver disponível, use a versão de maior qualidade (menos comprimida).
Ajuste o Limiar
O conversor desta página vetoriza em cores e não tem limiar. Se você vetorizar em preto e branco com o potrace ou o Inkscape, comece em 0,5; aumente para 0,6–0,7 em fontes desbotadas ou claras, ou diminua para 0,3–0,4 quando o fundo captar ruído.
Configurações do Potrace Explicadas
Quando você vetoriza em preto e branco com o potrace (diretamente ou pelo Inkscape), estes parâmetros definem o resultado. O conversor desta página, por sua vez, executa o vtracer com configurações fixas.
| Parâmetro | Flag | Intervalo | Padrão | Efeito |
|---|---|---|---|---|
| Limiar | -k |
0,0–1,0 | 0,5 | Corte de brilho para conversão binária. Menor = saída mais clara, maior = saída mais pesada |
| Suavização de cantos | -a |
0–1,334 | 1 | 0 = todos os cantos nítidos. 1,334 = suavização máxima. Controla curva vs. ângulo nos cantos. |
| Otimização | -O |
0 ou mais | 0,2 | Tolerância de otimização das curvas. Maior = menos segmentos, arquivo menor, menos precisão |
| Remoção de ruído | -t |
0–100+ | 2 | Área máxima em pixels de regiões isoladas a descartar. Maior = remove manchas maiores |
Configurações Recomendadas por Tipo de Fonte
| Imagem Fonte | Limiar | Cantos | Turdsize | Notas |
|---|---|---|---|---|
| Logotipo P&B limpo | 0,5 | 1 (suave) | 2 | Os padrões funcionam perfeitamente para logotipos de alto contraste |
| Esboço a lápis | 0,35–0,45 | 1,334 (máx) | 0 | Limiar mais baixo evita textura do papel; máximo suave para linhas fluidas |
| Carimbo / selo | 0,55–0,65 | 1 (suave) | 10–20 | Limiar mais alto captura o carimbo completo; turdsize alto remove respingos |
| Documento digitalizado | 0,5–0,6 | 0 (nítido) | 5–15 | Cantos nítidos para texto; remoção moderada de ruído para poeira do papel |
| Fonte desbotada / clara | 0,65–0,8 | 1 (suave) | 2–5 | Limiar mais alto captura conteúdo perdido em 0,5 |
| Pixel art / QR code | 0,5 | 0 (nítido) | 0 | Cantos nítidos preservam a geometria; sem remoção de ruído |
Vetorização Multicolorida
O potrace produz saída apenas em preto e branco: uma única camada binária, rastreada no seu limite. O conversor desta página evita essa limitação usando o vtracer, que agrupa as cores e vetoriza cada região de cor em uma única passagem.
Para vetorização multicolorida, existem abordagens alternativas:
- Rastreamento multipasse: Execute o potrace várias vezes em diferentes níveis de limiar, cada um capturando uma faixa de brilho diferente. Empilhe as camadas SVG resultantes com cores de preenchimento diferentes. O recurso "Trace Bitmap" do Inkscape oferece isso como "Multiple Scans: Brightness Steps."
- Quantização de cores + separação de camadas: Reduza a imagem a uma paleta de cores limitada (4–16 cores), separe cada cor em uma máscara binária e rastreie cada máscara independentemente. Ferramentas como o "Multiple Scans: Colors" do Inkscape automatizam isso.
- Adobe Illustrator Image Trace: Rastreamento assistido por IA que lida com múltiplas cores, gradientes e formas complexas. Produz saída multicolorida mais limpa do que o empilhamento de camadas, mas requer uma assinatura paga.
- Serviços com IA: Ferramentas como o Vectorizer.AI usam aprendizado de máquina para identificar formas, separar cores e gerar SVG multicolorido limpo. Melhores resultados do que métodos algorítmicos para imagens complexas, mas geralmente cobrados por imagem.
Para os casos de uso de vetorização mais comuns — conversão de logotipos, rastreamento de arte linear, preparação de arquivos de corte — a saída P&B do potrace é exatamente o que é necessário, e ele é executado instantaneamente e de graça.
Casos de Uso Práticos
Ampliação de Logotipos
O motivo mais comum para vetorizar: seu logotipo existe apenas como um PNG ou JPEG pequeno, e você precisa dele em tamanhos muito maiores para impressão, sinalização ou mercadorias. A vetorização converte o raster de resolução fixa em um SVG infinitamente escalável. A versão SVG pode ser impressa em um outdoor, bordada em um chapéu ou exibida como favicon — tudo a partir do mesmo arquivo.
Ícones SVG para Web
Se você tem um conjunto de ícones em arquivos PNG, vetorizá-los para SVG proporciona independência de resolução (nítidos em todas as telas), estilização CSS (mude as cores ao passar o mouse ou no modo escuro), tamanhos de arquivo menores e a capacidade de incorporá-los em HTML sem requisições HTTP extras.
Máquinas de Corte (Cricut, Silhouette, Laser)
Cricut, Silhouette e cortadoras a laser requerem arquivos de entrada vetoriais para gerar trajetórias de ferramentas. A máquina segue exatamente os caminhos vetoriais — o cortador ou laser rastreia as curvas matemáticas. Se o seu design existe apenas como PNG, a vetorização é a ponte entre o design raster e a operação de corte física. Imagens fonte limpas e de alto contraste produzem os melhores caminhos de corte.
Bordado
Máquinas de bordado precisam de contornos vetoriais para gerar trajetórias de pontos. As formas vetoriais determinam a direção, densidade e padrões de preenchimento dos pontos. Vetorizar um PNG de logotipo para SVG é geralmente o primeiro passo para criar um arquivo de bordado (.PES, .DST, .EXP). Formas simples com limites claros produzem a saída de ponto mais limpa.
Otimização de Desempenho Web
Substituir ícones e logotipos PNG por SVG em um site reduz o peso da página (um único SVG substitui vários PNGs específicos de resolução), melhora a nitidez em telas Retina e habilita temas baseados em CSS. Um site típico com 20 ícones pode economizar 200–400 KB ao trocar de PNG para SVG, melhorando diretamente as pontuações do Core Web Vitals.
Impressão em Grande Formato
Banners para feiras, adesivos para veículos, sinalização de edifícios e displays para exposições exigem arte que seja renderizada com nitidez em tamanhos físicos medidos em metros. Imagens raster que pareciam bem na tela ficam visivelmente borradas em grandes formatos de impressão. A vetorização do design garante nitidez matemática em qualquer tamanho de saída que a gráfica necessite.
Como Vetorizar uma Imagem no Inkscape e no Illustrator
Inkscape (gratuito)
- Importe a imagem (Arquivo → Importar) e selecione-a.
- Abra Caminho → Vetorizar Bitmap (Shift+Alt+B).
- Escolha Corte de brilho para uma cor ou Varreduras múltiplas → Cores para várias e clique em Aplicar.
- Afaste a vetorização, apague o bitmap e salve como SVG simples.
Adobe Illustrator
- Selecione a imagem inserida e abra Janela → Rastreamento de Imagem.
- Escolha uma predefinição (Logotipo em preto e branco, 6 cores, Foto de alta fidelidade) e ajuste o Limiar ou as Cores.
- Clique em Expandir para obter caminhos editáveis e exporte com Arquivo → Exportar → Exportar como → SVG.
A vetorização automática é gratuita. Contratar um designer para redesenhar um logotipo à mão custa mais, mas dá o resultado mais limpo em fontes complexas ou de baixa qualidade.