Como converter JPG para SVG ou PNG para SVG

Para converter JPG para SVG (ou PNG para SVG), você vetoriza a imagem. O programa encontra as bordas entre as cores e as redesenha como formas vetoriais. Um vetorizador no navegador faz isso em um passo, e o editor gratuito Inkscape faz com Caminho > Vetorizar Bitmap. A vetorização funciona bem para logotipos, ícones e desenhos de linha, e mal para fotos.

O que acontece quando você converte uma imagem para SVG

JPG, PNG e SVG guardam imagens de jeitos completamente diferentes. Um JPG ou PNG é uma grade de pixels coloridos. Um SVG descreve formas em texto: "uma curva daqui até ali, preenchida de azul-escuro". Não existe tradução direta entre os dois, então o conversor precisa descobrir onde estão as formas.

Esse processo se chama vetorização (em inglês, tracing). O programa agrupa cores parecidas, segue o contorno de cada grupo e suaviza os contornos em curvas. O resultado é uma aproximação da sua imagem feita de caminhos. Com poucas cores chapadas e bordas definidas, ela pode ficar quase idêntica ao original e escalar para qualquer tamanho. Com degradês, textura e detalhes finos, o programa precisa simplificar bastante.

Cuidado com conversores que pulam a vetorização. Algumas ferramentas embrulham o JPG ou PNG dentro de um arquivo SVG e dão o trabalho por encerrado. O arquivo termina em .svg, mas ainda guarda os mesmos pixels e fica borrado quando ampliado. Se uma máquina de corte, um programa de bordado ou uma gravadora a laser recusar o seu "SVG", essa é uma causa provável. Para conferir, abra o arquivo em um editor de texto. Se você vir um bloco longo começando com data:image/png;base64 ou data:image/jpeg;base64 e quase nenhum elemento path , a imagem nunca foi vetorizada.

Quais imagens ficam boas em SVG (e quais não ficam)

Bons candidatos:

• Logotipos com um punhado de cores chapadas.
• Ícones e ilustrações simples.
• Desenhos de linha em preto e branco, carimbos e clip-art.
• Assinaturas e escrita à mão digitalizadas em um tamanho razoável.
• Texto em uma fonte forte e limpa.

Maus candidatos:

• Fotos de pessoas, lugares ou produtos.
• Imagens com sombras suaves, degradês ou desfoque.
• Arquivos pequenos e de baixa resolução, em que as bordas já são borradas.
• JPGs muito comprimidos, com artefatos visíveis em volta das bordas.

Uma foto vetorizada em SVG parece um pôster feito de manchas de cor chapada. O arquivo pode acabar maior que o original, já que guarda milhares de formas minúsculas. Para fotos, mantenha um formato raster como JPG ou WebP.

JPG ou PNG: qual é a melhor fonte?

PNG, quando você puder escolher. A compressão JPG deixa borrões e ondulações leves em volta das bordas nítidas, e o vetorizador transforma isso em calombos e pontinhos soltos. Um PNG do mesmo logotipo tem bordas limpas e muitas vezes fundo transparente, o que vetoriza muito melhor. Se você só tem um JPG, use a maior versão que encontrar e limpe antes (dicas abaixo). Nosso guia de arquivos PNG explica por que o formato mantém as bordas intactas.

Como converter PNG em SVG no navegador

A ferramenta PNG para SVG vetoriza imagens PNG e JPG com a biblioteca de código aberto ImageTracer. Ela roda inteiramente no navegador, então o logotipo em que você está trabalhando não é enviado para lugar nenhum.

1. Abra a ferramenta e adicione seu PNG ou JPG.
2. Execute a vetorização e veja a prévia.
3. Se as bordas parecerem serrilhadas ou houver pontinhos soltos demais, prepare uma imagem de origem mais limpa ou maior e vetorize de novo.
4. Baixe o SVG.
5. Abra o SVG em um navegador e dê zoom para conferir as curvas antes de usá-lo.

Confira também o tamanho do arquivo. Um logotipo limpo geralmente gera um SVG pequeno. Se o download for muito maior que a imagem de origem, o vetorizador encontrou muitas formas minúsculas, sinal de que a origem tinha ruído ou detalhes demais.

Este é o caminho mais rápido para um logotipo ou ícone limpo. Para um design complicado, espere precisar ajustar o resultado em um editor vetorial.

Pense em onde o SVG vai ser usado antes de aceitar um resultado. Um logotipo para site só precisa ficar bom na tela, então pequenas imperfeições raramente importam. Máquinas de corte e plotters de vinil seguem cada caminho à risca, então pontinhos soltos viram cortes minúsculos e devem ser apagados. Para impressão, confira se as cores saíram exatamente nos tons esperados, porque vetorizadores fazem uma média das cores próximas.

Como converter JPG para SVG no Inkscape

O Inkscape é um editor vetorial gratuito e de código aberto para Windows, Mac e Linux. A vetorização dele dá mais controle. O próprio manual avisa para não esperar uma cópia perfeitamente fiel da imagem, o que resume bem a vetorização em geral.

1. Abra o Inkscape e importe o JPG ou PNG (Arquivo > Importar, ou arraste para a tela de desenho).
2. Selecione a imagem.
3. Escolha Caminho > Vetorizar Bitmap, ou pressione Shift+Alt+B.
4. Escolha um modo. Corte de brilho cria uma silhueta de uma cor, que serve para logotipos pretos e assinaturas. Vetorização de linha central transforma traços finos em linhas únicas, o que serve para escrita à mão. Varreduras múltiplas vetoriza várias cores como camadas separadas.
5. Clique em Aplicar. Os caminhos vetorizados são colocados sobre a imagem original.
6. Arraste o resultado para o lado para comparar e depois exclua o bitmap original.
7. Salve com Arquivo > Salvar Como e escolha um formato SVG.

Varreduras múltiplas dá mais detalhe de cor, mas cria muitos objetos sobrepostos para limpar. Comece com menos cores e adicione mais só se precisar.

Como obter uma vetorização mais limpa

A maior parte da qualidade vem da imagem de entrada. Alguns minutos de preparo fazem grande diferença.

• Comece pela versão maior e mais nítida que encontrar. Mais pixels ao longo de cada borda significam curvas mais suaves.
• Recorte tudo, menos o logotipo, com a ferramenta de recorte, para que marcas soltas não virem formas.
• Remova ou uniformize o fundo. Um fundo branco liso ou transparente vetoriza muito melhor que um fundo texturizado.
• Reduza as cores. Para um logotipo de uma cor, convertê-lo antes para preto e branco com a ferramenta de tons de cinza e aumentar o contraste ajuda o vetorizador a encontrar bordas limpas.
• Evite imagens de origem minúsculas. Um logotipo com 100 pixels de largura tem informação de borda de menos, e as curvas vão parecer irregulares em qualquer tamanho.

Depois de vetorizar, dê zoom nos cantos e no texto pequeno. Os vetorizadores costumam arredondar cantos vivos e fundir letras muito próximas. Se isso acontecer, tente uma origem maior ou corrija esses pontos à mão.

Quando redesenhar em vez de vetorizar

Se o logotipo é importante, como a marca de uma empresa que vai para placas ou camisetas, a vetorização é um ponto de partida. Um designer pode redesenhá-lo em um editor vetorial, usando a vetorização como guia, e produzir caminhos limpos e enxutos, com cores exatas.

Antes de tudo isso, peça o arquivo vetorial original a quem fez o logotipo. Um AI, EPS, PDF ou SVG do designer sempre vai ser melhor que uma vetorização. E, se você só precisa de uma imagem nítida em um tamanho específico, um PNG de alta resolução pode resolver sem conversão nenhuma.

O caminho inverso é bem mais simples, porque um SVG pode ser renderizado em qualquer tamanho em pixels. O guia para abrir arquivos SVG e salvá-los como PNG ou JPG explica isso.

Perguntas frequentes