Pixels to SVG

Drag & Drop files or
Drop images to convert here.

Tips

Make sure your pixels are 1:1 to a real pixel, otherwise, the SVG will be unnecesarily big, and not proportionate.

You can run the processed SVG through SVGOMG for even smaller file sizes.

How?

The image data is extracted from a canvas, and separated by color. The coordinates for each color are combined into single runs where possible to keep the path data syntax short, then merged into one path with a stroke of the color.

The script has been updated to use Web Workers where available, so larger images should now be processed in a fraction of the time. A 540x540 gif takes only 300 ms versus 30 seconds or a timeout before.

Credits

Inspired by px2svg. WebWorker support through Catiline.js, site by Shaw on Codepen, hosted by Liam.