Pixels to SVG

Need a pixel-perfect scalable image, but all you have is a low-res GIF? You could use image-rendering: pixelated and hope the browser will scale it right, or you could use this tool to convert a raster image to SVG.

Need more SVG? Try HalfTone.svg and LinePrint.svg.

Now featuring drag & drop uploads, multiple file output, and Web Workers for faster image processing!

Drag & Drop files or
Drop images to convert here.

Tips

Works best with 8-bit images, or graphics where colors are limited and the dimensions are relatively small. After conversion, run the output 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.