Como usar: PNG para SVG
- Solte um sprite em PNG, GIF ou WebP.
- Escolha um modo de saída: um path por cor (o menor), retângulos mesclados ou um rect por pixel.
- Defina o tamanho de exibição; o viewBox continua em pixels, então o SVG escala certinho de qualquer jeito.
- Se quiser, adicione um fundo sólido.
- Baixe o .svg ou copie o código.
O que você recebe
- SVG com shape-rendering="crispEdges"
- Comparação do tamanho do arquivo em cada modo
- Código-fonte SVG pronto para copiar
Dicas de quem faz jogos com ela
- O modo paths costuma gerar o menor arquivo e é o ideal para web, ícones e corte a laser.
- O modo rects é o mais fácil de editar à mão ou animar com CSS, já que cada bloco é um elemento separado.
- Mantenha os sprites pequenos. Um sprite 64×64 converte na hora; uma imagem tipo foto com milhares de cores gera um SVG enorme.
- Pixels semitransparentes viram fill-opacity, então sombras suaves sobrevivem à conversão.
Casos de uso
- Usar sprites como ícones ou logos nítidos em um site
- Imprimir pixel art em tamanho grande (pôsteres, adesivos, produtos)
- Importar pixel art no Figma, Illustrator ou Inkscape
- Corte a laser e recorte de vinil a partir de desenhos em pixel
Perguntas frequentes
A conversão é sem perdas?
Sim. Cada pixel é coberto por exatamente uma forma, com a cor e o alpha exatos. Rasterize o SVG no tamanho original e você recupera o PNG original.
Por que não simplesmente vetorizar a imagem com trace?
Ferramentas de trace suavizam as bordas em curvas, o que estraga a pixel art. Este conversor mantém as bordas retas de 90° na grade de pixels.
Qual modo gera o menor arquivo?
Paths. Retângulos da mesma cor compartilham um único elemento path com comandos relativos curtos. A ferramenta mostra o tamanho de cada modo para você comparar.
Vai ficar borrado ao ampliar?
Não. O SVG usa shape-rendering="crispEdges" e coordenadas inteiras, então as bordas ficam nítidas em qualquer zoom.
Existe limite de tamanho?
Até 512×512 pixels. Imagens maiores geram SVGs grandes demais para serem úteis.
Minha imagem é enviada para algum lugar?
Não, a conversão acontece no seu navegador.