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
Converta imagens rasterizadas PNG ou JPG em gráficos vetoriais SVG. Formato seguro e processado rapidamente no seu navegador.
Suporta até 50MB
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.
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.
Solte um PNG, escolha as configurações de rastreamento, gere um SVG.
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.