Conversor Gratuito

PNG para Vetor SVG

Converta imagens rasterizadas PNG ou JPG em gráficos vetoriais SVG. Formato seguro e processado rapidamente no seu navegador.

Arraste e solte o PNG/JPG aqui

Suporta até 50MB

Ou

Sobre esta ferramenta

A conversão de PNG em SVG é fundamentalmente uma operação de rastreamento, não uma alteração de formato. PNG armazena pixels; SVG armazena primitivas geométricas. Passar de uma grade de pixels para caminhos vetoriais escaláveis ​​requer a interpretação do bitmap e o desenho de formas aproximadas em torno de regiões de cores semelhantes. O resultado é genuinamente escalável – você pode redimensionar livremente sem pixelização – mas não é uma reprodução perfeita da fonte. O conteúdo fotográfico é mal traçado porque cada variação de cor no nível de pixel se torna uma forma, produzindo SVGs enormes que vão contra o propósito. Logotipos, ícones, arte de linha e gráficos de alto contraste são traçados de forma limpa porque possuem um pequeno número de regiões de cores com limites bem definidos.

Este conversor usa a biblioteca imagetracerjs, uma porta JavaScript de algoritmos de rastreamento vetorial semelhante ao potrace. O PNG é decodificado em um bitmap RGBA, o bitmap é segmentado em regiões de cores usando uma paleta configurável, o limite de cada região é traçado em um caminho, os caminhos são simplificados usando a aproximação de Bezier e os caminhos resultantes são emitidos como elementos de caminho SVG. Todo o pipeline é executado em seu navegador sem qualquer upload do servidor.

Os parâmetros de rastreamento controlam a compensação entre fidelidade e tamanho do arquivo. Mais cores e detalhes mais precisos produzem um SVG maior que corresponde melhor à fonte; menos cores e traçado mais grosseiro produzem um SVG menor com uma sensação mais estilizada. Os padrões são ajustados para logotipos e ícones; imagens complexas podem se beneficiar de uma passagem de rastreamento com configurações ajustadas ou podem simplesmente não ser boas candidatas para vetorização.

Por que converter PNG para SVG

A vetorização de um PNG é mais útil quando você precisa dimensionar a imagem além de sua resolução original. Os logotipos, em particular, muitas vezes chegam como PNGs em tamanho modesto e precisam aparecer nítidos em outdoors, telas retina e impressões de grande formato. Um traço vetorial produz um SVG que pode ser dimensionado sem perda de qualidade; a desvantagem é a fidelidade aos pixels originais.

O SVG também é significativamente mais compacto que o PNG para gráficos com poucas cores e grandes regiões planas. Um ícone PNG de 256×256 pode ter 8 KB; o SVG equivalente com duas ou três cores geralmente tem menos de 1 KB. Para bibliotecas de ícones de UI entregues em um frontend da web, as versões vetoriais reduzem o tamanho do pacote e melhoram a nitidez em todas as densidades de exibição.

Como usar

Solte um PNG, escolha as configurações de rastreamento, gere um SVG.

  1. Carregue seu PNG: Arraste o arquivo para a área de upload ou clique para navegar. Os melhores resultados vêm de PNGs com bordas nítidas e um pequeno número de cores distintas – logotipos, ícones, arte de linha, ilustrações simples. As fotografias são mal traçadas e produzem SVGs enormes.
  2. Ajuste as opções de rastreamento, se necessário: A contagem de cores controla quantas cores distintas aparecem na saída. A simplificação de caminho (também chamada de ltres ou qtres) controla a agressividade com que o algoritmo suaviza os cantos. Maior precisão produz SVGs mais próximos da origem, mas com mais dados de caminho.
  3. Rastrear e visualizar: O algoritmo imagetracerjs passa por quantização de cores, detecção de bordas, rastreamento de contorno e ajuste de Bezier. Rastreamento de escalas de tempo com tamanho da imagem e número de cores. Um logotipo de 256×256 com traços de 4 cores em menos de um segundo; uma imagem de 1024×1024 com 16 cores pode levar vários segundos.
  4. Baixe o SVG: Salve o SVG no seu dispositivo. O arquivo contém marcação XML com elementos de caminho; você pode abri-lo em qualquer editor de texto para inspecionar ou ajustar manualmente o resultado.

Casos de uso comuns

Detalhes técnicos

imagetracerjs implementa um pipeline de vários estágios: a quantização de cores reduz o bitmap a um número fixo de cores usando agrupamento k-means ou corte mediano; a detecção de bordas identifica limites de pixels entre regiões; o traçado de contorno segue limites para produzir polígonos fechados; o ajuste de linha e curva aproxima polígonos com curvas de Bézier para reduzir os dados do caminho.

Os parâmetros do algoritmo que mais importam são o número de cores (típico: 4–32), pathomit (caminhos mais curtos do que esse número de pixels são descartados como ruído), ltres (tolerância de linha — até que ponto uma borda pode se desviar antes de ser dividida em um novo segmento) e qtres (tolerância de curva quadrática — quão agressivamente as curvas são suavizadas). Os padrões funcionam bem para logotipos; imagens complexas se beneficiam do ajuste por imagem.

A saída é SVG 1.1 padrão com elementos de caminho. Cada região de cor se torna um caminho com um atributo de preenchimento. O arquivo resultante é aberto em qualquer navegador, editor de vetor ou ferramenta de design compatível com SVG. O tamanho do arquivo depende principalmente da contagem de caminhos e da densidade dos nós; um logotipo rastreado típico tem de 1 a 10 KB.

Melhores Práticas

Perguntas frequentes

A saída SVG será um arquivo vetorial verdadeiro?
A ferramenta rastreia a imagem raster para criar caminhos vetoriais. Os resultados funcionam melhor com gráficos, logotipos e artes lineares simples. As fotografias produzirão caminhos complexos e podem não ter a aparência esperada.
O que torna o SVG diferente de outros formatos de imagem?
SVG é um formato vetorial – as imagens são descritas como formas matemáticas em vez de pixels. Isso significa que os arquivos SVG podem ser dimensionados para qualquer tamanho sem perder qualidade e normalmente são muito menores do que imagens rasterizadas para gráficos como logotipos e ícones.
Há alguma limitação a ser observada?
Arquivos de até 50 MB são suportados. Arquivos muito grandes ou complexos podem demorar mais para serem processados. Todas as conversões acontecem no seu navegador, portanto a velocidade de processamento depende do seu dispositivo.
Minhas imagens são mantidas privadas durante a conversão?
Sim. Seus arquivos PNG são processados ​​inteiramente em seu navegador usando a API Canvas e JavaScript. Nada é carregado em nenhum servidor – o arquivo vai diretamente do seu dispositivo para o conversor e volta para o seu dispositivo.
O traço é editável no Illustrator ou no Inkscape?
Sim. A saída é SVG padrão com elementos de caminho. Tanto o Illustrator quanto o Inkscape abrem-no nativamente e permitem editar os caminhos, alterar cores e refinar o resultado.
Meu PNG foi carregado em um servidor?
Não. O rastreamento acontece no seu navegador usando imagetracerjs. O arquivo não sai do seu dispositivo.
Por que meu arquivo SVG é enorme?
Geralmente porque a imagem de origem tem muitas cores ou muitos detalhes. Tente reduzir a contagem de cores, aumentar a simplificação do caminho ou usar uma imagem de origem diferente com geometria mais limpa.
Posso rastrear um PNG com transparência?
Sim. Pixels transparentes tornam-se áreas sem caminhos no SVG. O fundo transparente é preservado quando o SVG é renderizado em qualquer cor de fundo.