JPG para SVG: Conversão de Raster
para Vetor Explicada

Raster vs Vetor: A Diferença Fundamental

Toda imagem digital se enquadra em uma de duas categorias: raster ou vetor. Entender a diferença é essencial para saber o que a vetorização pode e não pode fazer.

Uma imagem raster (JPG, PNG, BMP, TIFF) armazena uma foto como uma grade retangular de pixels coloridos. Cada pixel é um pequeno quadrado com um único valor de cor. O número total de pixels — a resolução — determina quanta informação a imagem pode conter. Uma foto de 3000×2000 pixels contém 6 milhões de valores de cor individuais. Ao ampliar, você eventualmente vê os quadrados individuais. Quando você escala a imagem além de sua resolução nativa, o software precisa inventar novos pixels entre os existentes, produzindo um resultado borrado e interpolado.

Uma imagem vetorial (SVG, AI, EPS, PDF) armazena uma foto como um conjunto de instruções matemáticas. Um círculo é descrito como um ponto central e um raio. Uma curva é uma equação de Bézier com pontos de controle. Uma região preenchida é um caminho fechado com uma cor de preenchimento. Como a imagem é definida por matemática em vez de pixels, ela pode ser renderizada em qualquer resolução — de um favicon de 16×16 a um outdoor de 10 metros — com nitidez perfeita sempre. O mecanismo de renderização simplesmente recalcula as curvas para o tamanho alvo.

Esta diferença fundamental significa que converter de raster para vetor não é como converter WAV para MP3 ou JPG para PNG. Essas são mudanças de formato dentro do mesmo modelo de dados (pixels para pixels, ou amostras para amostras). A conversão de raster para vetor é uma reconstrução — o software deve interpretar os dados de pixel e construir uma representação matemática completamente nova da imagem.

Como Funciona a Vetorização Automática

Quando você envia uma imagem JPG para o CleverUtils e a converte para SVG, o arquivo passa por um pipeline de várias etapas. Entender cada etapa ajuda a explicar por que certas imagens vetorizam muito bem enquanto outras produzem resultados inesperados.

Etapa 1: Conversão para Bitmap

A imagem de entrada (JPG, PNG ou qualquer formato raster suportado) é primeiro convertida para um bitmap bruto usando o ImageMagick. Esta etapa decodifica a imagem comprimida em uma grade de pixels não comprimida que o algoritmo de rastreamento pode processar. Quaisquer recursos específicos do formato (artefatos de compressão JPEG, canais alfa PNG, metadados EXIF) são removidos, deixando um bitmap limpo.

Etapa 2: Limiarização (Escala de Cinza para Binário)

O potrace, o motor de rastreamento, trabalha com imagens de dois tons (binárias) — cada pixel é preto ou branco. O bitmap em escala de cinza é convertido para binário usando um limiar de brilho. O brilho de cada pixel é comparado com o valor do limiar (0.0 a 1.0, padrão 0.5):

• Pixels mais escuros que o limiar tornam-se pretos (primeiro plano)
• Pixels mais claros que o limiar tornam-se brancos (fundo)

Esta é a etapa mais crítica do pipeline. O limiar determina quanto da imagem original é capturado como primeiro plano. Um limiar de 0.3 captura apenas os elementos mais escuros; 0.7 captura a maior parte da imagem, produzindo saída mais densa.

Etapa 3: Rastreamento de Bordas

O potrace verifica o bitmap binário e identifica fronteiras entre regiões pretas e brancas. Ele segue essas fronteiras pixel por pixel, construindo um contorno bruto de cada forma. O algoritmo lida com formas aninhadas (uma região branca dentro de uma região preta dentro de outra região branca) rastreando a hierarquia de relações dentro/fora.

Etapa 4: Ajuste de Curvas de Bézier

Os contornos de pixels brutos da Etapa 3 são formas irregulares em escada. O potrace ajusta curvas de Bézier suaves a esses contornos, substituindo bordas em escada por curvas matemáticas limpas. O algoritmo de ajuste de curva minimiza o erro entre o limite de pixel original e a curva ajustada, mantendo a descrição do caminho compacta.

Dois parâmetros controlam este processo:

• Suavização de cantos (-a): Controla se os cantos são renderizados como ângulos agudos ou curvas suaves. Um valor de 0 preserva todos os cantos; 1.334 suaviza tudo.
• Otimização (-O): Controla quão agressivamente o potrace simplifica curvas. Valores mais altos produzem caminhos mais simples com menos pontos de controle, mas com rastreamento potencialmente menos preciso.

Etapa 5: Saída SVG

As curvas de Bézier ajustadas são escritas como elementos de caminho SVG — XML padrão que qualquer navegador, ferramenta de design ou máquina de corte pode renderizar. O pipeline de comandos completo se parece com isto:

O Que Vetoriza Bem

A etapa de limiarização binária é a chave para entender quais imagens produzem excelente saída SVG. Imagens que naturalmente se dividem em regiões claras e escuras bem definidas — com bordas fortes e variação tonal mínima — mapeiam perfeitamente para o binário preto/branco que o potrace processa.

O denominador comum: alto contraste, bordas claras, faixa tonal limitada. Se você consegue semicerrar os olhos para a imagem e ainda identificar sua forma essencial, ela vetorizará bem.

O Que NÃO Vetoriza Bem

O mesmo processo de limiarização que funciona brilhantemente para logos e arte linear falha para imagens com variação tonal contínua. Quando uma imagem contém milhões de sutis transições de cor e brilho, forçar cada pixel a ser preto ou branco destrói as informações visuais que tornam a imagem significativa.

• Fotografias: Um retrato ou paisagem contém gradientes suaves em pele, céu, folhagem e tecido. A limiarização colapsa tudo isso em regiões stark de preto e branco, produzindo uma aparência abstrata ou posterizada. O arquivo SVG também pode ser enorme — milhares de caminhos minúsculos tentando representar o que originalmente era variação tonal suave.
• Cenas complexas: Imagens cheias com muitos elementos sobrepostos, profundidades variadas e fundos complexos produzem saída vetorial ruidosa e confusa com caminhos demais para ser útil.
• Gradientes suaves: Um céu ao pôr do sol, uma transição de cor ou um efeito de vinheta não podem ser representados como binário preto/branco. O gradiente é cortado em faixas discretas com fronteiras irregulares.
• Texturas detalhadas: Trama de tecido, veio de madeira, poros da pele, pelos — essas texturas de detalhe fino geram enormes quantidades de caminhos vetoriais minúsculos que nem parecem bons nem servem a qualquer propósito prático.
• Imagens de baixa resolução: Uma miniatura de 100×100 pixels dá ao rastreador tão poucos pixels para trabalhar que as curvas ficam grosseiras e bloco. Entrada de maior resolução sempre produz saída mais suave.
• JPGs fortemente comprimidos: Artefatos de compressão JPEG (padrões em blocos ao redor das bordas) confundem a detecção de bordas, produzindo caminhos vetoriais ruidosos que rastreiam os artefatos de compressão em vez do conteúdo real da imagem.

Nosso Pipeline Potrace

O CleverUtils usa o potrace (Polygon Tracer), criado por Peter Selinger, para conversão de raster para vetor. O potrace é o mesmo motor usado pelo recurso "Trace Bitmap" do Inkscape e é amplamente considerado o melhor auto-rastreador de código aberto disponível.

O pipeline de conversão tem três componentes:

1. ImageMagick convert — Decodifica o arquivo de entrada (JPG, PNG, WebP, TIFF, PSD, etc.) e o converte para um bitmap BMP bruto que o potrace pode processar
2. Pipe (|) — Os dados BMP são transmitidos diretamente para o potrace sem gravar um arquivo temporário, mantendo o processo rápido e eficiente em memória
3. potrace — Rastreia os contornos do bitmap e gera um arquivo SVG com curvas de Bézier limpas

O comando completo:

convert input.jpg BMP:- | potrace -s --opaque -o output.svg

Esta configuração padrão usa um limiar de 0.5, suavização moderada de cantos e otimização padrão. Para a maioria dos logos, arte linear e gráficos simples, os padrões produzem excelente saída sem nenhum ajuste de parâmetros.

Configurações de Vetorização Explicadas

O potrace oferece vários parâmetros que controlam a qualidade e o caráter da saída vetorial. Entender essas configurações ajuda você a obter os melhores resultados para diferentes tipos de imagens fonte.

Limiar (-k)

O parâmetro mais importante. Controla o corte de brilho entre preto (primeiro plano) e branco (fundo) na etapa de conversão binária. Faixa: 0.0 a 1.0, padrão 0.5.

Suavização de Cantos (-a)

Controla se o rastreador preserva cantos agudos ou os arredonda em curvas. Faixa: 0 a 1.334, padrão 1.

• -a 0 — Todos os cantos são agudos. Bom para formas geométricas, pixel art e diagramas técnicos onde você quer ângulos precisos.
• -a 1 (padrão) — Suavização moderada. Cantos próximos a 90 graus permanecem agudos; outros são arredondados.
• -a 1.334 — Suavização máxima. Todos os cantos tornam-se curvas. Produz a saída mais suave, boa para formas orgânicas e caligrafia.

Remoção de Ruído (-t turdsize)

Remove pequenas manchas isoladas da imagem binária antes do rastreamento. O valor especifica o tamanho máximo (em pixels) das regiões a descartar. Padrão: 2.

• -t 0 — Mantém tudo, incluindo ruído de pixel único. Use isso apenas para imagens fonte muito limpas.
• -t 2 (padrão) — Remove pequenas manchas (regiões de 1-2 pixels). Funciona para a maioria das imagens.
• -t 10-50 — Remove agressivamente recursos pequenos. Útil para documentos digitalizados com poeira, textura de papel ou artefatos de compressão.

Otimização (-O)

Controla quantos segmentos de curva de Bézier o potrace usa para aproximar cada contorno. Otimização mais alta produz caminhos mais simples (menos bytes SVG), mas rastreamento potencialmente menos preciso. O nível de otimização padrão é um bom equilíbrio entre fidelidade e tamanho de arquivo para a maioria das imagens.

Quando Vetorizar

A vetorização não é uma melhoria universal — é a ferramenta certa para casos de uso específicos onde as propriedades dos gráficos vetoriais oferecem uma vantagem clara sobre as imagens raster.

Impressão em Grande Formato

Banners, displays para feiras, adesivos para veículos e sinalizações prediais exigem arte que pode ser escalada para metros sem perder qualidade. Um logo que foi desenhado em 300×200 pixels torna-se um borrão em um banner de 3 metros. Convertê-lo para SVG dá à gráfica um arquivo independente de resolução que renderiza nitidamente em qualquer escala.

Ícones e Elementos de UI Escaláveis

Sites e aplicativos exibem ícones em muitos tamanhos: 16px em menus, 32px em barras de ferramentas, 64px em cartões de recursos, 128px em seções hero. Servir um PNG separado para cada tamanho é disperdício. Um único ícone SVG renderiza perfeitamente em todos os tamanhos, responde a estilização CSS (muda cores ao passar o cursor) e tipicamente pesa menos que uma única renderização PNG.

Desenhos Lineares Digitalizados

Arquitetos, engenheiros e artistas frequentemente digitalizam esboços desenhados à mão, plantas baixas ou diagramas técnicos. O JPG digitalizado é uma captura raster de algo que foi originalmente desenhado com linhas e curvas — exatamente o que o formato vetorial representa nativamente. Vetorizar a digitalização reconstrói a intenção original, produzindo caminhos vetoriais limpos e editáveis a partir dos dados de pixel digitalizados.

Máquinas de Corte e CNC

Cricut, Silhouette, cortadoras a laser e roteadores CNC exigem entrada vetorial para gerar caminhos de ferramentas. Se o seu design existe apenas como JPG ou PNG, a vetorização é a ponte entre o design raster e a operação de corte físico. Os caminhos vetoriais tornam-se as linhas exatas que a máquina segue.

Bordado e Serigrafia

Máquinas de bordado precisam de contornos vetoriais para gerar caminhos de pontos. A serigrafia requer separações vetoriais limpas para cada camada de cor. Em ambos os casos, vetorizar um logo ou design raster é o primeiro passo no fluxo de trabalho de produção.

Alternativas com IA

O potrace é um rastreador algorítmico tradicional — ele detecta bordas e ajusta curvas usando otimização matemática. É excelente para saída em preto e branco de fontes de alto contraste, e é rápido, gratuito e determinístico (a mesma entrada sempre produz a mesma saída).

Para casos de uso que o potrace não consegue lidar bem, os vetorizadores baseados em IA oferecem uma abordagem diferente:

Ferramentas como Vectorizer.AI e Recraft usam aprendizado de máquina para identificar formas, separar camadas de cor e gerar saída SVG multi-cores limpa a partir de imagens complexas. Elas conseguem lidar com logos em cores completas, ilustrações com gradientes e até algum conteúdo fotográfico que o potrace não consegue.

No entanto, para os casos de uso mais comuns de vetorização — converter um logo em P&B, rastrear um desenho linear, criar arquivos de corte SVG para Cricut, ou vetorizar texto digitalizado — o potrace produz excelentes resultados instantaneamente e gratuitamente. Ele continua sendo o motor por trás do Trace Bitmap do Inkscape, uma das ferramentas de vetorização mais amplamente usadas no mundo.

Dicas de Pré-Processamento para Melhores Resultados

A qualidade da sua saída SVG depende muito da qualidade da sua imagem de entrada. Alguns minutos de preparação antes do envio podem melhorar dramaticamente o resultado da vetorização.

• Aumente o contraste: Abra a imagem em qualquer editor (até o editor integrado do celular) e empurre o controle deslizante de contraste para cima. Contraste mais forte significa bordas mais claras para o rastreador seguir.
• Corte firmemente: Remova o fundo desnecessário. Menos pixels irrelevantes significa saída mais limpa e arquivos SVG menores.
• Use a resolução mais alta disponível: Uma imagem de 2000×2000 pixels dá ao rastreador 4x mais dados de borda do que uma versão de 1000×1000. Mais pixels significa curvas mais suaves.
• Prefira PNG ao JPG quando possível: A compressão JPEG cria artefatos em blocos ao redor das bordas. Esses artefatos confundem o rastreador, produzindo caminhos vetoriais ruidosos. Se você tem ambos os formatos disponíveis, use o PNG.
• Converta para escala de cinza primeiro: Se a imagem é naturalmente P&B (como um esboço ou logo), converter explicitamente para escala de cinza antes de enviar remove qualquer ruído de cor que possa afetar a limiarização.
• Remova o ruído de fundo: Para documentos digitalizados, use um ajuste de "níveis" ou "curvas" para empurrar o branco do papel para branco puro e a tinta para preto puro. Isso elimina a textura do papel e os artefatos de digitalização.