Como converter PNG e JPG em SVG editável e verificar o resultado

Para converter um PNG ou JPG em um SVG editável, você precisa vetorizar as formas visíveis ou redesenhá-las como vetores. Colocar a imagem dentro de um contêiner SVG não a vetoriza. O teste prático é conseguir mudar o preenchimento ou o contorno de um componente depois de remover a imagem raster original — a extensão .svg não basta.

A vetorização funciona especialmente bem com ícones planos, silhuetas bem definidas e ilustrações simples. Uma fotografia, sombra suave ou pintura com textura costuma exigir uma escolha: preservar a imagem raster, aceitar uma interpretação vetorial simplificada ou reconstruir alguns elementos manualmente. A IA pode ajudar a redesenhar uma ilustração, mas isso produz uma nova interpretação, cuja fidelidade precisa ser verificada separadamente.

Este tutorial inclui uma imagem de teste original com uma caneca geométrica, resultados reais de vetorização local, um SVG deliberadamente enganoso que apenas incorpora um bitmap e uma versão vetorial recolorida. As imagens de teste foram criadas por código; não são saídas de um modelo de IA. A conversão foi executada com o VTracer 0.6.15 em 11 de novembro de 2026. Não testamos o Illustrator pago nem serviços de conversão com IA para este artigo.

Baixe os exemplos e veja a diferença

Baixe o kit de exemplos de PNG para SVG. Ele contém mug.png, mug-wrapped.svg, mug-traced.svg, mug-recolored.svg, uma imagem de teste com gradiente, o script de conversão e o relatório de inspeção. Use esses arquivos antes de experimentar com um logotipo de cliente ou um design confidencial.

Essas contagens foram medidas nos arquivos; não são metas. Quatro caminhos podem representar uma ilustração simples e útil; centenas ainda podem ser difíceis de editar. Por outro lado, um vetor pode conter retângulos, círculos ou texto sem nenhum caminho. Inspecione o conteúdo real e a alteração que precisa fazer.

Captura do navegador, em inglês, mostrando nosso visualizador local de evidências. A entrada foi criada por código; estes são resultados reais de vetorização, não uma interface de produto de IA.

Escolha entre vetorizar, redesenhar ou combinar formatos

Vetorize quando o contorno existente for importante. Boas entradas têm silhueta clara, resolução suficiente e poucas regiões de cor. Comece pelo melhor original disponível, não por uma miniatura copiada de uma apresentação. A compressão JPEG pode criar pequenas ilhas de cor que acabam virando formas indesejadas.

Redesenhe quando a organização dos objetos for mais importante que reproduzir os pixels com exatidão. Por exemplo, pedir para “separar caneca, alça e pires em grupos nomeados” é útil se você pretende animá-los ou reorganizá-los. Um vetorizador automático geralmente reconhece cores conectadas, não objetos com significado. A IA pode criar uma organização melhor, mas também alterar proporções, remover detalhes ou inventar texto. Trate o redesenho como uma revisão de design que precisa de aprovação.

Mantenha um arquivo misto quando os pixels fizerem sentido. Um fundo fotográfico com rótulos vetoriais pode ser um SVG legítimo. O erro é descrever o arquivo inteiro como uma fotografia vetorizada. Explique quais partes continuam rasterizadas e preserve uma fonte em alta resolução. Não prometa detalhes fotográficos ilimitados só porque o contêiner é escalável.

Para gerar uma nova arte vetorial em vez de converter uma imagem existente, consulte o guia de SVG com Image 2.6 (em inglês). Os pontos de partida e os critérios de aceitação são diferentes. Se uma solicitação de SVG/GIF for rejeitada nesse modelo, consulte o guia de erros de formato de saída e parâmetros do Image 2.6 (em inglês), em vez de mudar a extensão do arquivo.

Vetorize em um editor gráfico

O guia de vetorização do Inkscape explica como importar uma imagem e usar Path → Trace Bitmap na interface em inglês. Use uma única varredura para uma silhueta monocromática simples; use a vetorização por cores quando precisar preservar regiões distintas. Confira a prévia e ajuste as configurações à entrada, em vez de aplicar a mesma predefinição a todas as imagens.

Depois de aplicar a vetorização, mova o resultado para o lado. Muitos editores o colocam sobre a imagem original, o que pode mascarar um resultado ruim. Em uma cópia do documento, oculte ou remova o bitmap original. Inspecione contorno, vazados e detalhes pequenos. Recolora um componente, salve e reabra o SVG. Assim você distingue “um vetor foi gerado” de “o vetor é útil”.

No Illustrator, o fluxo oficial do Image Trace começa por inserir e selecionar a imagem e abrir o painel Image Trace. Escolha uma predefinição adequada, inspecione a prévia e expanda o resultado quando precisar de caminhos editáveis comuns. Esta alternativa se baseia na documentação; os resultados disponíveis para download aqui foram criados com VTracer, não com Illustrator.

O texto merece tratamento próprio. Vetorizar letras geralmente produz contornos, não texto editável. Se as palavras precisarem mudar, recrie o texto com uma fonte disponível e confira as quebras de linha e o espaçamento. Mantenha uma cópia de trabalho com texto editável e, se o destinatário exigir, uma cópia separada com texto convertido em contornos. Essa conversão preserva as formas, mas elimina a edição normal do texto.

Reproduza a conversão local

O projeto VTracer oferece um conversor de raster para vetor. Este exemplo fixa a versão realmente usada; versões mais recentes podem ter APIs diferentes. Extraia o ZIP para uma nova pasta, abra um terminal nela e execute:

python3 -m venv .venv
source .venv/bin/activate
python -m pip install vtracer==0.6.15 Pillow==11.3.0
python convert.py mug.png my-mug.svg

No Windows, ative o ambiente com .venv\Scripts\activate em vez de source. O script se recusa a sobrescrever uma saída existente. A conversão é local: ele não chama uma API de IA nem envia a imagem para um servidor. Alguns sistemas podem precisar de ferramentas de compilação se não houver um pacote wheel compatível. Usar um editor de desktop é uma alternativa razoável a resolver esse problema de instalação.

As configurações testadas usam vetorização por cores, regiões sobrepostas e curvas spline. As regiões podem se sobrepor; ao apagar um componente em primeiro plano, uma forma maior do fundo pode aparecer. Essa estrutura não é necessariamente a que um designer criaria manualmente. Se você precisa de formas independentes para corte ou fabricação, inspecione sobreposições e vazados na aplicação de destino, em vez de considerar suficiente uma prévia correta na web.

O inspetor fornecido informa os elementos de imagem raster, a geometria vetorial e os atributos da área de desenho:

python inspect_svg.py my-mug.svg

Isso ajuda a verificar a estrutura, mas não constitui uma auditoria de segurança nem uma prova de fidelidade visual. Um arquivo sem elemento <image> ainda pode estar visualmente errado, depender de uma fonte indisponível ou conter geometria desnecessariamente complexa. Abra apenas SVGs confiáveis e inspecione o código gerado antes de incorporá-lo a um site.

Recolora, redimensione e confira o resultado

Na nossa imagem de teste, trocar um preenchimento laranja por roxo mudou a cor da caneca sem alterar o contorno. Abra mug-recolored.svg ao lado de mug-traced.svg e confirme que o vazado da alça e o pires continuam intactos. No editor gráfico, use a seleção de objetos para mudar os preenchimentos; edite os nós apenas quando quiser alterar o contorno.

O ZIP inclui mug-responsive.svg como exemplo com a área de desenho normalizada. A saída original do conversor especifica largura e altura, mas não uma viewBox. Isso é válido para um documento de tamanho fixo, porém pouco conveniente para incorporação responsiva. Para esta imagem conhecida de 512 × 384 pixels, o script acrescenta viewBox="0 0 512 384" à saída. Em outro arquivo, derive a viewBox do sistema de coordenadas real; não cole essas dimensões sem conferir. Teste uma renderização pequena e outra grande e preserve a proporção.

Para testar uma entrega realista, faça três alterações deliberadas em uma cópia: mude um preenchimento, mova um objeto e redimensione a ilustração inteira. Reabra o arquivo salvo e confirme que as três mudanças permaneceram. Isso verifica o fluxo de edição de que o destinatário realmente precisa e é mais útil do que aceitar uma miniatura ou uma mensagem de sucesso do conversor.

Use IA para redesenhar sem perder as instruções

Se uma ferramenta de IA aceitar uma imagem de referência e devolver código SVG ou um SVG para download, comece com um pedido delimitado. Abaixo está um modelo reutilizável em inglês; ele não indica que o executamos em todas as ferramentas:

Rebuild the attached illustration as a standalone editable SVG.
Preserve the silhouette, proportions and important negative spaces.
Use vector paths or shapes; do not embed the original raster image.
Separate meaningful components into named groups.
Use a viewBox matching the intended aspect ratio.
Do not add text, objects, external images, scripts or external fonts.
If a detail cannot be reproduced reliably, identify it rather than
silently inventing a replacement. Return the SVG and a short list
of simplifications. Keep the original image unchanged.

Em seguida, peça uma única revisão controlada, como mudar a cor da caneca preservando a geometria. Compare as saídas em vez de confiar na afirmação do agente de que nada mais mudou. Para uma marca, um contorno exato ou um letreiro aprovado juridicamente, use o vetor original ou peça a revisão de um designer. Um redesenho bonito ainda pode descumprir a tarefa.

Você pode iniciar a tarefa no Ofox Chat com uma referência cujo uso seja permitido e os requisitos de saída acima. Os resultados locais de vetorização deste guia não demonstram que todos os modos do Chat geram SVG ou preservam seu design específico. Inspecione o arquivo recebido antes de usá-lo.

Corrija as falhas comuns

Nossa imagem de teste com gradiente serve de alerta: as configurações escolhidas retornaram apenas dois caminhos, simplificando bastante o campo de cores. Isso não prova que gradientes sejam impossíveis em SVG. Mostra por que a mesma configuração automática pode servir para um ícone plano e ser inadequada para uma imagem de tons contínuos.

Uma conversão concluída deve incluir a entrada original, o SVG editável e uma prévia, com as simplificações declaradas. Guarde a versão de trabalho para que a próxima alteração não comece com outra conversão com perdas.