Rastreador de Imagem para SVG

O Rastreador de Imagem para SVG transforma um PNG, JPG ou qualquer outro bitmap raster em um vetor SVG limpo e infinitamente escalonável. Ao contrário dos rastreadores do lado do servidor que fazem upload do seu arquivo ou de SVGs "falsos" que apenas incorporam um bitmap base64, esta ferramenta roda inteiramente no seu navegador — quantizando a imagem em camadas de cores e rastreando novamente o contorno de cada camada em caminhos vetoriais reais usando uma combinação de acompanhamento de limites, simplificação de Ramer-Douglas-Peucker e suavização de cantos de Chaikin. Arraste um logotipo, um ícone, um esboço ou uma foto, assista à reconstrução da visualização lado a lado em tempo real e, em seguida, copie a marcação SVG ou baixe um arquivo .svg que você pode editar no Figma, Illustrator ou Inkscape.

O Que Torna Este Rastreador Diferente

Como Funciona (Pipeline de 5 estágios)

Como Usar

1. Carregue um bitmap. Arraste um PNG/JPG para a zona de upload, clique para navegar, cole da área de transferência (Ctrl+V) ou clique em qualquer uma das amostras integradas para ver o rastreador em ação.
2. Escolha uma predefinição. Logo para marcas de 2 a 4 cores, Silhueta para formas recortadas, Esboço de Linha para arte desenhada à mão, Pôster de Foto para fotos estilizadas, Arte Detalhada para saídas sutis de 10 cores.
3. Ajuste os controles deslizantes. Camadas de cores controla quantas cores distintas o rastreador mantém. Suavização arredonda as escadas de pixels. Simplificação reduz passagens retas longas (menor = mais detalhes, maior = arquivo menor). Resolução do rastreio define a largura de trabalho interna.
4. Copie ou baixe. Use Copiar SVG para a marcação bruta, Baixar .svg para um arquivo vetorial editável ou Baixar .png para renderizar o SVG limpo de volta para um raster de alta resolução.

Dicas para o Rastreamento Mais Limpo

• Comece com imagens de alto contraste. Fundos sólidos e bordas nítidas rastreiam muito melhor do que fotos cheias de gradientes.
• Use a predefinição certa para o trabalho. A predefinição padrão Logo assume 3 cores planas — ela parecerá estranha em uma foto. Mude para Pôster de Foto ou Arte Detalhada para imagens naturais.
• Ajuste primeiro a simplificação, depois a suavização. A simplificação remove pontos; a suavização suaviza o que resta. Fazer nessa ordem mantém o resultado pequeno E suave.
• Reduza a resolução do rastreio para logotipos. 240 px é mais que suficiente para um ícone — ir além disso apenas produz caminhos com mais ruído.
• Ative o Fundo transparente se quiser aplicar o SVG em um layout colorido. Caso contrário, o rastreador preencherá o fundo com branco.
• Para esboços, use o modo Bordas. Ele executa um filtro Sobel primeiro e rastreia o mapa de bordas resultante — excelente para arte de linha e desenhos a lápis.

Onde os SVGs Rastreados se Destacam

Logotipos e ícones vetoriais permanecem nítidos em qualquer tamanho de tela e DPI — desde um favicon de 16×16 até um banner principal de 4K. Os SVGs rastreados também são perfeitos para edições posteriores: abra o arquivo no Figma, Adobe Illustrator ou Inkscape e você poderá recolorir, remodelar ou animar qualquer caminho individual. O SVG também é um formato web de primeira classe: cole a marcação em linha no HTML para pular uma requisição de rede extra, aplique-o no CSS como uma background-image via URI data: ou anime os traços do caminho com stroke-dasharray para aquele efeito de escrita feito à mão.

Histórico do Algoritmo

O rastreador clássico de padrão ouro é o Potrace (Peter Selinger, 2003), que usa estágios de ajuste de polígonos e otimização de curvas para produzir caminhos Bezier incrivelmente suaves. Uma conversão completa do Potrace possui vários milhares de linhas, portanto, esta ferramenta usa um pipeline mais leve e igualmente bem compreendido: acompanhamento de limites com vizinhança de Moore para extração de contorno, Ramer-Douglas-Peucker (também chamado de algoritmo de Douglas-Peucker) para simplificação de caminho e o algoritmo de corte de cantos de Chaikin para suavização. Cada estágio é O(n) em comprimento de caminho, então todo o rastreador finaliza uma imagem típica de 240 px em bem menos de um segundo.

Privacidade e Segurança

Tudo roda localmente. O elemento <input type="file"> lê seu arquivo diretamente para o navegador, a API Canvas extrai os dados de pixel no seu dispositivo e o rastreador JavaScript nunca faz uma requisição de rede com a sua imagem. Você pode confirmar isso abrindo o DevTools → Network e observando enquanto rastreia — nenhum tráfego de upload aparece. Isso torna a ferramenta segura para logotipos proprietários, ativos de marcas não lançados e fotos pessoais.

FAQ

Minha imagem é enviada para o seu servidor?

Não. O Rastreador de Imagem para SVG é 100% no lado do cliente. Seu bitmap é lido no navegador, processado com a API Canvas, rastreado com JavaScript puro e nunca enviado pela rede. Desconecte seu Wi-Fi e o rastreador continuará funcionando.

Quais formatos de imagem posso rastrear?

Qualquer formato raster que seu navegador consiga renderizar: PNG, JPG, GIF (primeiro quadro), WebP e BMP. Você também pode rastrear um SVG existente (ele será rasterizado primeiro), o que é útil para simplificar vetores complexos ou requantizar suas cores.

Com qual predefinição devo começar?

Para logotipos e ícones de cores sólidas, use a predefinição Logo. Para recortes puros em preto e branco, use Silhueta. Para desenhos e arte de linha, use Esboço de Linha. Para fotos, use Pôster de Foto ou Arte Detalhada. Em seguida, ajuste levemente os controles deslizantes — a visualização ao vivo torna óbvio o que cada controle faz.

Por que meu SVG rastreado parece pixelado ou blocudo?

Aumente o controle deslizante de Suavização para arredondar cantos nítidos de pixels e aumente o controle deslizante de Simplificação para recolher passagens retas longas. Uma Resolução do rastreio mais alta também captura mais detalhes antes do rastreamento, o que gera contornos mais finos.

Posso editar o SVG rastreado depois?

Sim. A saída é uma marcação SVG simples com um <path> por camada de cor (o um por silhueta no modo mono/borda). Abra-o no Inkscape, Illustrator, Affinity Designer, Figma ou qualquer editor de texto para recolorir, remodelar ou animar caminhos individuais. Os caminhos são listados na ordem de renderização (mais claros primeiro), de modo que o painel de camadas em qualquer editor vetorial corresponderá.

Qual o tamanho máximo da minha imagem de entrada?

Qualquer tamanho — mas o rastreador reamostra internamente seu bitmap para a Resolução do rastreio escolhida (64–512 px). Ir além disso captura detalhes mais finos ao custo de um tamanho de arquivo SVG maior. Para a maioria dos logotipos, 200–300 px é o ponto ideal; para fotos detalhadas, tente 400–512 px.

O SVG rastreado ficará exatamente igual ao bitmap?

Próximo, mas nunca perfeito ao nível de pixel — essa é a troca da vetorização. A posterização para N cores necessariamente descarta gradientes, e a simplificação de caminho remove recursos minúsculos. Para ativos essenciais à marca, você deve sempre começar a partir de um arquivo vetorial original, se houver um; esta ferramenta serve para situações em que você possui apenas um bitmap e precisa de uma versão vetorial utilizável dele.

Posso usar o SVG rastreado comercialmente?

O rastreador não adiciona marca d'água, atribuição e nem análises à saída. Se você pode usar o resultado comercialmente depende dos direitos que você possui sobre o bitmap original — rastrear o logotipo de outra pessoa não transfere a propriedade dele. Use-o em ativos que você criou ou que possui licença para vetorizar.