How to Convert Pixel Art to Vector Without Smoothing Away the Pixels

You can convert pixel art to vector, but first decide whether the square pixels must remain visible. To preserve the original look, rebuild the image as a grid or object mosaic. To turn the sprite into a smooth illustration, use contour vectorization. Those are different outputs, and a generic trace cannot choose the right one for you.

If the real goal is simply to show crisp pixel art on a website or in a game, you may not need an SVG at all. A correctly sized PNG with nearest-neighbor scaling is often smaller and truer to the source.

Three outputs that solve three different jobs

This is less about which format is “better” and more about what the blocks mean. In pixel art, stair-step edges are often deliberate. Smoothing them can be as destructive as adding blur to a line drawing.

Grid preservation and contour smoothing are different jobs

Route 1: preserve the pixel grid exactly

The most literal vector conversion turns the raster cells into vector rectangles. A red pixel becomes a red square. A run of adjacent red pixels can remain separate squares or be merged into a larger rectangular shape when that does not change the silhouette.

Before you begin, find the artwork's true grid dimensions. A sprite displayed at 800 by 800 pixels may have started as a 32 by 32 grid enlarged with nearest-neighbor scaling. The 32 by 32 structure is what you want to reproduce, not the enlarged display dimensions.

Illustrator Object Mosaic workflow

Adobe documents a built-in route for converting an embedded bitmap into a mosaic:

1. Place the original pixel art in Illustrator and embed it.
2. Select the image and choose Object > Create Object Mosaic.
3. Set the tile count to match the original pixel grid when you know it.
4. Use square tiles and color output.
5. Keep the source raster until you have inspected the mosaic, then remove or hide it.
6. Compare the outer silhouette, interior gaps, and palette against the original at high zoom.

Adobe's Create Object Mosaic documentation describes the command, square-tile option, color setting, and source-raster handling. The pixel-art workflow is a practical use of that documented mosaic behavior.

An object mosaic can be structurally faithful and still inefficient. A 64 by 64 sprite has 4,096 cells before any merging. Remove fully transparent cells, combine adjacent same-color rectangles where possible, and avoid carrying invisible objects into the final SVG.

Route 2: make a grid SVG without Illustrator

You can build the same kind of file with a pixel-aware script or purpose-built converter. The principle matters more than the app:

1. Read the source at its native grid size.
2. Map each non-transparent pixel to an exact vector rectangle.
3. Preserve the palette values without anti-aliasing.
4. Merge neighboring cells only when the merged shape produces the same visible grid.
5. Export with an SVG viewBox that matches the native grid dimensions.
6. Test the SVG at integer and non-integer display sizes.

The open-source vectorize-pixelart project is one example of a pixel-specific conversion utility. It also illustrates a general limit: large or complex grids can produce heavy SVG output. Treat any old utility as research material first. Review its code and maintenance state before adding it to a production workflow.

If you are comfortable with SVG markup, a tiny sprite can also be rebuilt manually with <rect> elements. That is reasonable for a 12 by 12 icon. It is not a sensible afternoon for a detailed scene.

Route 3: smooth the shapes on purpose

Sometimes the pixels are a draft rather than the identity. You may want the character, flower, or icon to become a clean sticker, print graphic, or logo with rounded contours.

If you deliberately want that smoothed interpretation, PerfectVector fits the contour route. Upload the largest nearest-neighbor version of the artwork you have, then judge the result as a new illustration:

1. Remove anti-aliasing first. Soft fringe pixels create extra colors and tiny edge shapes.
2. Keep the palette controlled. If the source uses eight colors, a trace should not invent dozens because of compression or blur.
3. Inspect stepped diagonals. Decide which should become straight segments and which should become curves.
4. Check holes and one-pixel gaps. Small openings may close when neighboring regions are simplified.
5. Review the node count. The point of smoothing is not to replace every square corner with several tiny curves.
6. Test at the destination size. A friendly smooth curve at poster size may erase a face or hand at icon size.

This route changes the art. Save the source PNG beside the SVG so nobody mistakes the vector interpretation for an exact archival version.

Prep problems that make every route worse

The source was resized with smoothing. Return to the native sprite or rescale it with nearest-neighbor interpolation. Once new blended edge colors have been baked in, the original grid is harder to recover.

The file is a JPG. Compression creates color blocks and ringing around every hard pixel edge. Use the original PNG whenever possible.

The transparent background became matte white. A white background can become thousands of unwanted cells or one large traced shape. Restore transparency before conversion, then check the result on a contrasting canvas. Our guide to transparent SVG backgrounds covers that audit.

The artwork contains semi-transparent effects. Glows, shadows, and partial opacity are not traditional pixel cells. Decide whether to preserve them as raster effects, quantize them into solid colors, or redesign them for the vector version.

Do you need vector for a website?

Not necessarily. If the artwork is a game sprite or interface icon, a PNG can remain the correct master. Use a native-size asset, scale it by whole-number multiples when possible, and configure the browser or rendering engine to use pixelated or nearest-neighbor interpolation.

An SVG grid helps when the palette must be edited as objects, the work needs to print at a large size, or the delivery system specifically requires vector. It does not automatically make a small screen asset lighter. A vector object for every cell can outweigh a compact PNG.

This is one of the cases where “SVG scales forever” is true but incomplete. The artwork may scale forever while becoming expensive to store, edit, or render. Our PNG versus SVG guide explains the broader format decision, and what image vectorization means covers why conventional traces favor shapes over pixel grids.

Final preflight

Before you deliver the file, compare it with the original at native size and at the intended output size.

• The grid dimensions match the source.
• No anti-aliased fringe colors were introduced.
• Transparent cells remain transparent.
• Stair-step silhouettes are intact in the preservation route.
• Smoothed edges are intentional in the contour route.
• One-pixel gaps, eyes, highlights, and interior holes still read correctly.
• Repeated same-color cells are simplified only where the picture remains identical.
• The SVG does not embed the original raster by accident. If it does, it may still look pixelated despite the file extension.

The cleanest workflow is the one that names its trade. Preserve the grid when the pixels are the art. Smooth the contours when you want a new vector interpretation. Keep the PNG when vector adds no useful control.

If you want smooth contours rather than a preserved grid, run the artwork through PerfectVector, then compare the silhouette, one-pixel gaps, and small details against the pixel master before you use it.