Como converter PNG para SVG: vetorizar logos, ícones e traços

Um PNG é uma imagem raster: uma grade fixa de pixels, cada um com uma cor e, opcionalmente, um valor de opacidade. Um logo de 500 × 500 px tem exatamente 250.000 desses quadradinhos e nada além disso, então ampliá-lo para o tamanho de um pôster só faz cada quadrado ficar maior ou borrar o espaço entre eles. Um SVG é uma imagem vetorial, um arquivo de texto que lista formas como <path>, <circle> e <rect> com coordenadas e cores de preenchimento. Um navegador ou uma máquina de corte redesenha essas formas no tamanho de que precisar, e por isso um logo vetorial fica nítido na tela do celular e em um banner de feira.

Passar de vetor para raster é fácil, porque o renderizador simplesmente pinta as formas em pixels; o SVG para PNG faz isso em um segundo. O caminho inverso não tem atalho sem perdas, porque a grade de pixels não guarda nenhum registro das formas que a originaram. Alguém precisa olhar para os pixels e adivinhar onde cada forma começa e termina. Essa etapa de adivinhação se chama vetorização (tracing), e todo conversor de PNG para SVG honesto, do Illustrator a um programa de linha de comando, é por baixo um vetorizador.

Alguns conversores pulam a parte difícil. Eles geram um arquivo SVG válido com um único elemento <image> contendo o PNG original embutido como texto base64, o que ainda deixa o arquivo cerca de um terço maior que o PNG. O resultado abre como SVG e passa numa verificação de tipo de arquivo, mas continua sendo uma imagem de pixels dentro de um invólucro vetorial: ao dar zoom, você vê as mesmas bordas serrilhadas, e uma máquina de corte não encontra caminhos para seguir. Abra qualquer SVG em um editor de texto e procure por data:image/png; se essa sequência estiver lá, nada foi vetorizado.

A vetorização funciona melhor com imagens que já nasceram como formas. Um logo exportado de um aplicativo de design, um ícone chapado, um desenho com contornos pretos, uma assinatura escaneada ou um estêncil são feitos de poucas cores sólidas separadas por bordas nítidas. O vetorizador agrupa cada cor em regiões, segue os contornos e ajusta curvas suaves sobre eles, de modo que o SVG fica próximo das formas que o designer desenhou. Letras grossas em um logotipo também vetorizam bem, porque uma letra grande é só mais uma forma preenchida, e cada glifo vira um contorno que você pode recolorir ou redimensionar, mas não digitar de novo.

Fotografias são o caso oposto. Um retrato ou uma foto de produto tem milhares de tons sutilmente diferentes se misturando, e o formato vetorial não tem uma forma eficiente de descrever isso. Peça 16 cores a um vetorizador e você recebe uma ilustração posterizada com faixas visíveis; peça 64 e recebe dezenas de milhares de formas minúsculas em um arquivo bem maior que o PNG, que ainda assim não parece uma foto. Degradês suaves, sombras e brilhos também viram pilhas de faixas finas. Texto pequeno é um terceiro ponto problemático: com 10–12 px, o antisserrilhado mistura cada letra ao fundo, e o vetorizador não distingue um "e" de um "o".

A resolução importa mais que qualquer configuração. O vetorizador ajusta cada curva à escada de pixels ao longo de uma borda, e quanto mais fina a escada, mais fiel a curva. Se você mesmo exportou o PNG do Figma, Canva, Photoshop ou de uma apresentação, exporte de novo com duas ou três vezes o tamanho de exibição; um logo com 1500–2000 px de largura dá bastante material ao vetorizador. Não amplie um PNG pequeno com um ampliador de IA antes, a menos que o resultado fique limpo em zoom de 100 %, porque a textura de borda inventada é vetorizada com a mesma fidelidade que as bordas reais.

Depois, simplifique o fundo. O PNG aceita transparência total, e um fundo transparente é o caso mais fácil: todo pixel totalmente transparente é tratado como espaço vazio, então o SVG não tem uma caixa branca atrás da arte. Se o PNG tem um fundo sólido, corte rente à arte antes; nosso guia sobre como cortar uma imagem em uma proporção explica o enquadramento exato. Um fundo carregado, como um logo fotografado em uma camiseta, deve ser removido ou pintado com uma única cor chapada antes de vetorizar.

Por fim, reduza o número de cores antes que o vetorizador faça isso por você. Oculte sombras, brilhos e camadas de degradê no arquivo original e, se a versão vetorial não precisar do degradê, substitua o preenchimento pela cor intermediária. Conte as cores sólidas que sobraram, incluindo a do contorno, e anote o número; é o dado mais útil que você vai informar na próxima etapa. Se estiver em dúvida entre um JPEG e um PNG do mesmo logo, fique com o PNG, já que a compressão JPEG adiciona ruído ao redor de cada borda, como explicamos em JPG vs JPEG vs PNG.

Todo vetorizador faz as mesmas três perguntas, mesmo quando os nomes mudam. A primeira é quantas cores manter. No conversor de PNG para SVG, Modo de cor escolhe entre Cor, Escala de cinza e Preto e branco, e Número de cores define em quantos grupos os pixels são separados, de 2 a 64. Use o número que você anotou. Se for alto demais, o vetorizador separa os pixels de borda suavizada em cores finas próprias, o que aparece como um halo tênue em volta de cada forma; se for baixo demais, duas cores da marca se fundem em uma.

A segunda pergunta é como tratar as bordas. Suavização arredonda os degraus deixados pelos pixels, e Detalhe define o tamanho mínimo de uma mancha para virar forma. A página de PNG começa com Detalhe 70 e Suavização 40, o que preserva os cantos pequenos em uma exportação limpa. Diminua Detalhe se aparecerem poeira e pontos soltos, aumente Suavização se as curvas ficarem tremidas, e defina Curvas como Linhas retas para logos geométricos de bordas retas ou como Bordas de pixel para pixel art que deve continuar quadriculada.

A terceira pergunta vale só para a vetorização em preto e branco: onde traçar a linha entre tinta e papel. Limiar vai de 1 a 254, com 128 como padrão. Pixels mais escuros que o limiar viram pretos; os mais claros ficam vazios. Para uma assinatura feita com caneta esferográfica azul fina, aumente para 160–180 para que os traços fracos sobrevivam; para um desenho de marcador grosso em papel levemente acinzentado, reduza para cerca de 100 para que a textura do papel não vire pontinhos. Mude uma configuração por vez e compare, porque os efeitos se combinam.

Não se contente com a miniatura. Abra o SVG em um navegador e dê zoom de 400–800 % na curva mais apertada, como o bojo de uma letra ou a ponta de um traço. Uma boa vetorização mostra arcos suaves e cantos vivos onde o desenho tem cantos; uma fraca mostra ondulações, amassados e pontas arredondadas. Depois abra o arquivo em um editor vetorial como Inkscape, Illustrator ou Figma e ative a visualização de contorno ou de nós. Um logo simples de duas cores costuma precisar de algumas centenas de nós; se o seu mostrar vários milhares, o vetorizador seguiu ruído e os caminhos serão trabalhosos de editar ou cortar.

O tamanho do arquivo é uma verificação rápida. Um SVG otimizado de um logo chapado costuma ter de alguns kilobytes a algumas dezenas de kilobytes, muitas vezes menor que o PNG de origem. Um arquivo vetorizado várias vezes maior que o PNG original geralmente indica cores demais, detalhe demais ou uma foto que não deveria ter sido vetorizada. Mantenha Otimizar SVG ativado, pois ele arredonda coordenadas e junta caminhos sem mudança visível, e por fim amplie a arte até o tamanho de um pôster e reduza até o de um favicon para confirmar que ela funciona bem nos dois.

A opção gratuita para computador é o Inkscape. Importe o PNG, selecione-o e abra Caminho > Vetorizar Bitmap (Shift+Alt+B). Os modos de varredura única, como o corte de brilho, geram um único caminho preto, ideal para desenhos de traço; os modos de varredura múltipla vetorizam um número definido de cores ou tons de cinza como camadas empilhadas. A vetorização em preto e branco do Inkscape se baseia no Potrace, uma biblioteca que Peter Selinger lançou em 2001. O Potrace em si é um programa de linha de comando que lê PBM, PGM, PPM ou BMP em vez de PNG, trabalha apenas com imagens de dois tons e gera SVG, PDF, EPS ou DXF, o que o torna uma boa escolha para automatizar grandes lotes de digitalizações.

No Adobe Illustrator, o Rastreamento de Imagem (Image Trace) substituiu o antigo Live Trace no Illustrator CS6. Coloque o PNG, abra Janela > Rastreamento de Imagem e comece por uma predefinição como Logo em preto e branco, 3 cores ou 16 cores, depois ajuste Caminhos, Cantos e Ruído na seção avançada. O rastreamento continua ativo até você clicar em Expandir, que o transforma em caminhos comuns e editáveis. Se você não tem nenhum dos dois programas instalados, um conversor no navegador executa o mesmo processo de reduzir cores, achar bordas e ajustar curvas; o conversor de imagem em SVG também aceita JPG, WebP e HEIC e pode gerar EPS, PDF ou DXF no lugar de SVG.

Na web, o SVG é uma Recomendação do W3C desde 2001 e todos os navegadores atuais o exibem em uma tag <img>, como plano de fundo CSS ou embutido no HTML, onde as cores podem até mudar ao passar o mouse. Um logo vetorizado costuma substituir vários tamanhos de PNG para telas retina por um único arquivo pequeno. Para máquinas de corte, o SVG é o formato que o Cricut Design Space e o Silhouette Studio esperam: cada forma vetorizada vira um caminho de corte, e uma vetorização multicolor chega em camadas separadas que você pode cortar em vinis de cores diferentes. Cortadoras a laser e softwares CNC costumam preferir DXF, que o PNG para DXF gera com as mesmas configurações de vetorização.

Gráficas pedem arte vetorial porque uma prensa, um digitalizador de bordados ou uma recortadora de adesivos precisam de bordas, não de pixels, e um SVG vetorizado muitas vezes atende a isso em adesivos, camisetas ou banners. Ainda assim é uma aproximação: as curvas são ajustes estimados, as cores são médias de pixels e o texto vira contorno. Por isso, antes de vetorizar o logo de uma empresa, pergunte a quem o criou. Um designer ou agência quase sempre tem o AI, EPS, PDF ou SVG original, com curvas exatas, cores nomeadas e fontes, e enviá-lo leva um minuto. Vetorizar é a ferramenta certa quando esse original se perdeu, quando o logo só existe em um papel timbrado escaneado ou quando a arte é um desenho seu.