Scalable Pixels

Why this tool?

Convert your pixel-art image/sprite to a scalable image format. Ideal for those situations when you want to use the image in different sizes without losing quality. You can use the SVG across a wide range of media, for example on a website, flyer, banner or advertisement.

Using the tool

Click the 'Select image' button and select a bitmap image. This can be a .jpeg, .png, .gif or .bmp file. Update some optional scaling and SVG configuration and let the tool generate the SVG image for you. This tool will convert each pixel to a rectangle shape and add it to the SVG. It keeps the pixels as pixels and it does not use tracing. After completion you can download the SVG file or copy the XML code into your clipboard.

Please note that uploading a large image will generate an SVG with a lot of shapes. This can be hard to handle by the web browser. This tool will not show the generated SVG as a preview when it contains too many shapes. Apart of that, you will can still download the generated SVG as a file.

Difference between bitmap and SVG

Bitmap images, like JPEGs and PNGs, are raster based graphics. A bitmap is a grid of small squares: pixels. Each pixel has a specific colour and together these compose the image. A major drawback of this file format is that scaling the image does not make it look better. An bitmap has a fixed dimension and when scaling, the individual pixels will be 'stretched' and that makes the overall image look blurry.

SVG stands for 'Scalable Vector Graphics' and is a W3C standard vector image format. This file format contains XML data, which describes two-dimensional shapes which makes up the image. SVGs are largely used in web pages, because it has some great benefits. These are usually smaller in file size compared to bitmap images. Another great benefit is that an SVG is infinitely scalable.