Vetorizar um Logo de PNG para SVG — Sem Perder o Detalhe Fino

Você tem um logo como PNG. Precisa dele como SVG — para o site, para a assinatura de e-mail que aparece nítida em telas Retina, para a gráfica que quer vetor nos cartões de visita. Contratar um designer para recriar leva dias. Ferramentas de vetorização automática levam segundos. Este guia explica como vetorizar de forma limpa, onde essas ferramentas falham e como se recuperar quando falham.

Ferramenta usada: paste-to-download.com/vectorize — conversor de PNG/JPG para SVG no navegador, sem upload, sem marca d'água.

Por que SVG importa para logos

Logos precisam ficar certos em todo tamanho. Um favicon 32 × 32 e um banner de feira 4000 × 4000 são o mesmo logo, mas um arquivo raster (PNG, JPG) só pode ter um tamanho — o resto fica ou pixelizado (quando esticado para maior) ou desperdiça bytes (quando superdimensionado para o slot).

SVG (Scalable Vector Graphics) descreve o logo como matemática — curvas, fills, strokes. A matemática renderiza perfeitamente em qualquer tamanho. Padrão em todo lugar onde existe um navegador moderno, além da maior parte do software de design.

O ideal: guardar o logo mestre como SVG, exportar versões raster sob demanda.

O que vetorização automática realmente faz

Um vetorizador (também chamado de "trace" ou "rasterize" inverso) olha uma imagem raster e identifica regiões de cor similar. Para cada região, calcula um caminho fechado que segue o contorno da região. A saída é um caminho por região — esse é seu SVG.

A qualidade da saída depende de:

Resolução da fonte — entrada maior = mais detalhe para rastrear
Nitidez de borda — bordas limpas rastreiam limpas; bordas borradas produzem caminhos trêmulos
Contagem de cores — menos cores = saída mais simples; mais cores = mais caminhos
Artefatos de anti-aliasing — bordas suaves da rasterização criam microrregiões de cor falsas

Entendendo isso, você consegue pré-processar a fonte para sair com vetor limpo.

Passo 1: Comece com a fonte de mais alta resolução que tiver

A regra de ouro: se o arquivo vetorial original existe (AI, EPS, PDF, SVG), use ele. Não vetorize quando você tem o original.

Se só tem rasters, escolha o maior, mais limpo:

Um PNG 2000 × 2000 sempre vetoriza melhor que uma miniatura 200 × 200
Uma captura do logo num site é pior que o arquivo de origem que o site usou
Uma foto de um logo impresso (câmera na mão, capturou um cartão de visita) é muito pior que um arquivo digital — recodificação por JPEG mais ruído fotográfico criam muitas regiões de cor falsas

Se a fonte é pequena ou ruidosa, tente /upscale primeiro no modo Lanczos para limpar e ampliar antes de vetorizar.

Passo 2: Limpe a fonte se necessário

Vetorizadores gostam de:

Fundos brancos limpos ou transparentes
Cores sólidas (sem gradientes ou texturas fotográficas)
Bordas nítidas (anti-aliased tudo bem; borrado não)

Vetorizadores têm dificuldade com:

Artefatos JPEG (cada bloco 8×8 vira uma região falsa)
Gradientes (interpretados como muitos passos discretos de cor)
Sombras (vetorizadas como uma sequência de anéis com alpha baixo)
Fundos fotográficos (cada folha, cada nuvem vira um caminho)

Pré-processamento:

Remova o fundo com /remove-background se o logo está num fundo complexo
Aplique blur leve se a fonte tem artefatos JPG (contraintuitivo — suaviza bordas falsas antes do tracing)
Aumente o contraste se a fonte está desbotada
Aumente a saturação se você quer que o vetorizador distinga claramente as regiões de cor

Passo 3: Abra a ferramenta de vetorização e escolha o modo certo

Abra /vectorize. Solte seu logo. Escolha o modo:

Alto Contraste: melhor para logos de 1-2 cores (preto-no-branco, preto-na-cor). Produz 1-2 caminhos.
Colorido: melhor para logos multicoloridos com fills chapados (3-8 cores distintas). Produz um caminho por região de cor.
Detalhado: para logos com muitos elementos pequenos ou trabalho fino de linha. Produz mais caminhos, saída maior.

Para a maioria dos logos de marcas modernas (limpos, chapados, 2-4 cores), o modo Colorido é o padrão. Para monogramas old-school ou logos de uma cor só, Alto Contraste.

Passo 4: Ajuste threshold e contagem de cores

Dois controles críticos:

Threshold (0-255): o corte de brilho para distinguir escuro de claro. Threshold mais alto = mais pixels vão para a região "escura". Padrão 128 (cinza médio). Ajuste até as bordas do logo baterem com o original.
Contagem de cores: o número máximo de cores de fill distintas no SVG. Um logo de 2 cores deve ser 2. Um logo de 5 cores, 5. Definir alto demais produz ruído; baixo demais funde cores distintas.

No vetorizador do paste-to-download, os dois controles mostram preview ao vivo. Ajuste até o preview bater com o original, depois exporte.

Passo 5: Exporte o SVG e verifique no navegador

Clique em Vetorizar & Baixar. Abra o arquivo .svg resultante diretamente num navegador (arraste o arquivo para a barra de endereços):

Deve renderizar idêntico ao PNG
Dê zoom com Ctrl+= (ou ⌘+= no Mac) — em zoom 1000% as bordas ainda devem ficar crocantes
Redimensione a janela do navegador — o SVG re-renderiza nítido em qualquer tamanho

Se parece quebrado (caminhos serrilhados, cores faltando, formas estranhas), volte ao passo 4 e tente outras configurações.

Falhas comuns e correções

"As bordas do logo ficaram onduladas"

A fonte tinha resolução baixa demais ou artefatos de compressão JPG. Tente uma fonte de resolução maior, ou passe a fonte por /compress primeiro para PNG (denoising dos artefatos JPG), depois vetorize.

"Algumas cores se fundiram em uma"

A contagem de cores está baixa demais. Aumente até cada cor de fill distinta no original ganhar seu próprio caminho.

"Tem um halo de cores intermediárias ao redor do logo"

Artefatos de anti-aliasing. Reduza a contagem de cores (faz o halo colapsar no fill principal) ou use um threshold maior (elimina pixels claros de borda).

"Texto fino no logo está ilegível"

Texto é a coisa mais difícil de vetorizar a partir de raster. Duas opções: (a) use a fonte original e redigite o texto manualmente no SVG (procure o nome da fonte; empresas frequentemente usam fontes comercialmente disponíveis), ou (b) aceite a aproximação vetorial e ajuste depois.

"Gradiente no original virou degraus com bandas"

Vetorizadores não conseguem representar gradientes contínuos facilmente. Você precisaria substituir manualmente os degraus por um elemento <linearGradient> ou <radialGradient>. Para a maioria dos logos não vale a pena; se o gradiente é essencial, recrie o logo no Illustrator/Figma usando a especificação de cores da marca.

Quando você deve contratar um designer em vez disso

Vetorização automática é ótima para:

Uso interno (slides, sites internos, protótipos)
Conversões iniciais a partir de material impresso
Logos menores com formas simples

Não é ótima para:

Ativos finais de marca que serão usados por anos
Logos com elementos intrincados desenhados à mão
Impressão em tamanhos muito grandes (banners, envelopamento de veículo)

Para ativos finais de marca, o fluxo é: vetorizar automático → usar a saída como ponto de partida → limpar manualmente no Inkscape ou Illustrator. Um designer trabalhando a partir de um vetor automático gasta 30 minutos em vez de 3 horas.

Local-no-navegador: por que importa para logos

Logos costumam ser confidenciais pré-lançamento. Subir para um serviço desconhecido para vetorização é um risco de vazamento.

/vectorize roda inteiramente na aba do seu navegador. O vetorizador baseado em Potrace é compilado para WebAssembly, roda localmente, seu logo nunca sai do seu dispositivo. Abra o painel Network: zero tráfego de saída carregando dados do logo.

O TL;DR

Comece com a fonte limpa de mais alta resolução que tiver
Remova o fundo ou faça denoise da fonte se necessário
Abra /vectorize, escolha o modo certo
Ajuste threshold e contagem de cores até o preview bater com o original
Exporte, verifique no navegador em vários níveis de zoom

O resultado: um logo que escala perfeitamente do favicon 16 px ao banner de feira de 16 pés.