How do I vectorize pixel art without it getting smoothed?

Updated on

Pick the Pixel art preset in the Homotope workshop: every pixel keeps its square shape, outlines stay exactly stepped, colours (up to 64) are never blended, and the SVG downloads for free.

Pixel art PNG: a house with a red roof, a yellow sun and a blue sky, in large square pixels. PNG · 256 × 256 px
The same pixel art traced to SVG: every pixel stays a crisp square. Engine SVG
32 × 32 pixel sprite exported at ×8 (256 × 256 px PNG) and the engine SVG, Pixel art preset, untouched: exact stepped outlines, no rounded pixel, no smoothing.
×6 detail: the stepped roof: square steps, none of them rounded. Drag the slider to compare; hover over the image or hold your finger on it to move the magnifier.
Try it with your image

Steps

  1. Open the workshop and drop the sprite as a PNG (or WebP).
  2. Pick Pixel art: no denoising, no upsampling, no smoothing, no blend band.
  3. Check with the slider that every pixel stayed square, then download the SVG.

Native file (32 × 32 px) or upscaled with nearest neighbour (×4, ×8): both work and give the same shapes. With “Merge by colour”, neighbouring pixels of the same colour form a single stepped path, lighter than one square per pixel. The sprite’s transparency is kept.

Nothing leaves your computer: see vectorize without uploading.

The trap: blurred pixel art

Pixel art upscaled with bilinear filtering (the default in many programs and websites) has soft edges: each border gains in-between colours, which turn into tiny stray shapes. Go back to the original file, or re-export it with nearest neighbour. Beyond 64 colours, the closest shades are grouped: keep Pixel art for limited palettes, and use Illustration for a richer image.

What it is good for

Production exports (DXF, EPS, PDF, separations): 2 free per month with an account, unlimited with Pro; without Pro, 1 credit each beyond those 2. The details: how much vectorizing costs.

Frequently asked questions

Why do my pixels come out rounded elsewhere?

A general-purpose tracer smooths outlines. The Pixel art preset keeps them on the pixel grid, with no curve.

Should I upscale the sprite first?

No: the native file is enough. A nearest-neighbour upscale works too; a blurry one does not.

Is the pixel art SVG free?

Yes, with no account and no limit, like the upscaled PNG export, except transparent background and recolouring (Pro).

Related questions

Guides and conversions

Try it with your image