Binary Silhouette to SVG

What it is for

Sometimes the artwork already exists as a grid: a pixel icon you drew on graph paper, a mask exported by a script, a game sprite's collision map, or a silhouette an AI agent produced as text. This tool turns that grid into a real SVG with path outlines, so it scales to any size without blur and opens in any vector editor.

Type one row per line. A 1 is filled and a 0 is transparent; every row must have the same length, up to 128 by 128. Choose one fill color as a six-digit HEX value. Nothing is uploaded except the text you paste.

The tool does not smooth anything. Every edge follows the pixel grid exactly, so a circle stays a stepped circle. If you need curves, trace the result again in a vector editor or start from a higher-resolution drawing in Raster Artwork to SVG.

Worked example

A small badge, eight rows of eight:

00111100
01111110
11100111
11000011
11100111
01111110
00111100
10000001

With the fill #7A3E9D, the summary reads "Traced 3 vector shapes with 40 path nodes on the 8 × 8 grid." The metrics show Shapes 3, Transparent holes 1, Path nodes 40 and Dropped pixels 0.

Why three shapes? The ring is one shape, and the two lone pixels in the bottom corners are separate shapes because they touch nothing. The empty middle of the ring is enclosed on all sides, so it becomes one transparent hole: the SVG uses even-odd filling, and anything behind the badge shows through.

Now compare a ring drawn with diagonal steps only:

0110
1001
0110

This gives 4 shapes and 0 holes. Pixels count as connected only when they share an edge, not just a corner, so the four pieces stay separate and the middle is not a hole.

How to read the result

• Shapes counts connected filled regions. Each one becomes its own SVG path.
• Transparent holes counts enclosed empty areas inside those shapes.
• Path nodes is the number of corner points. Straight runs are merged, so a solid rectangle of any size needs only 4 nodes.
• Sampled grid repeats your grid size. The SVG uses one unit per cell, so a 7 × 6 grid becomes a 7 × 6 viewBox; set the display size in your editor or with CSS.
• Dropped pixels is always 0 here, because this tool keeps even single pixels.

The preview shows the paths; Download traced SVG saves the file.

Tips and common mistakes

• Every row must be the same length. A stray space is trimmed, but a missing digit makes the whole grid invalid.
• Only 0 and 1 are allowed. Convert # and . art first, for example with a find-and-replace.
• If two parts should be one shape, make sure they share at least one edge, not just a corner.
• Use one fill color per run. For a two-color icon, trace each color as its own grid and combine the paths in a vector editor.
• A checkerboard is the worst case: every filled cell becomes its own shape, so a large one can hit the 2048-shape limit.

FAQ

Is the SVG really vector, or a picture inside an SVG?

It is real path geometry. No bitmap is embedded, and every path can be selected, recolored or edited in a vector editor.

Why does my circle look jagged?

The outline follows the pixel edges exactly and no curve fitting is applied. Draw on a finer grid for smoother edges.

What are the limits?

Grids up to 128 by 128 cells, at most 2048 shapes and 60000 path nodes per result.

Can I edit colors per shape or start from an image?

Use Lumina Vector Lab to trace an image on your device, recolor or hide individual shapes and save a project. Raster Artwork to SVG traces an uploaded PNG, JPEG or WebP on the server.