How to use the PNG to SVG
- Drop a PNG, GIF or WebP sprite.
- Pick an output mode: one path per color (smallest), merged rectangles, or one rect per pixel.
- Set the display size; the viewBox stays in pixels so the SVG scales cleanly anyway.
- Optionally add a solid background.
- Download the .svg or copy the markup.
What you get
- SVG with shape-rendering="crispEdges"
- Per-mode file size comparison
- Copyable SVG source
Tips from making games with it
- Paths mode is usually the smallest and is what you want for the web, icons and laser cutters.
- Rects mode is easiest to edit by hand or animate with CSS, since each block is its own element.
- Keep sprites small. A 64×64 sprite converts instantly; a photo-like image with thousands of colors makes a huge SVG.
- Semi-transparent pixels become fill-opacity, so soft shadows survive the conversion.
Use cases
- Using sprites as sharp icons or logos on a website
- Printing pixel art large (posters, stickers, merch)
- Importing pixel art into Figma, Illustrator or Inkscape
- Laser cutting and vinyl cutting from pixel designs
FAQ
Is the conversion lossless?
Yes. Every pixel is covered by exactly one shape with its exact color and alpha. Rasterize the SVG at the original size and you get the original PNG back.
Why not just trace the image?
Tracing tools smooth edges into curves, which ruins pixel art. This converter keeps hard 90° edges on the pixel grid.
Which mode makes the smallest file?
Paths. Rectangles of the same color share one path element with short relative commands. The tool shows the size of each mode so you can compare.
Will it look blurry when scaled?
No. The SVG uses shape-rendering="crispEdges" and integer coordinates, so edges stay sharp at any zoom.
Is there a size limit?
Up to 512×512 pixels. Larger images produce SVGs too big to be useful.
Is my image uploaded?
No, conversion happens in your browser.