Pixel art to SVG

Pixel art to clean SVG

Baipix exports your pixel art as SVG with one path per color, and pixels of the same color merged into one shape. The file stays small and sharp at any size, and pastes into Figma or Illustrator as shapes you can edit.

Open the editor How to do it

Pixels: 1024
Colors, so paths: 18
Baipix SVG: 8.4 KB
A square per pixel: 57.5 KB

The 32 × 32 starfighter from the gallery, compared with an SVG made of one square per pixel: 85% lighter, and 18 shapes to edit instead of 1024.

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" shape-rendering="crispEdges">
<path fill="#121126" d="M0 0h32v1h-32zM0 1h15v1h-15zM17 1h15v1h-15zM0 2h6v1h-6zM7 2h7v1h-7zM1…"/>
<path fill="#1b1a2e" d="M15 1h2v1h-2zM14 2h1v1h-1zM17 2h1v1h-1zM14 3h1v1h-1zM17 3h1v1h-1zM13 …"/>
<path fill="#4a4880" d="M6 2h1v1h-1zM0 4h1v1h-1z"/>
…
</svg>

Then paste it in Figma with Ctrl+V (Cmd+V on a Mac).

Copy and paste

Straight into Figma, no file.

CtrlShiftC

Copy as SVG in Baipix

The drawing goes to the clipboard as SVG. On a Mac, it's Cmd+Shift+C.

CtrlV

Paste in Figma

It lands as vector, not as an image: one shape per color, your layers as named groups, ready to recolor or resize. The same works in Illustrator, and in any app or code editor that takes SVG.

Copy as PNG is next to it, for apps that only take images.

What you get

What's in the file.

One path per color

Each color is one shape. To change a color everywhere, you change it once.

Pixels merged, no gaps

Pixels of the same color next to each other are drawn as one shape. The file stays small, and no thin lines show up between pixels when you scale it up.

Layers kept

Your layers and groups come out as named groups, with their opacity and blend mode.

Any size, or a gap

Choose how big a pixel is, from 1× to 32×. You can also leave a gap between pixels for an LED look: it stays vector too.

How to do it

Three steps.

1
Draw it, or import it
Draw in Baipix, or import a PNG. If the image was scaled up, like a screenshot at 400%, Baipix finds the pixel grid and gets the original pixels back.
2
Export as SVG
Click Export, pick SVG and a size. Or press Ctrl+Shift+C to copy the SVG without saving a file.
3
Use it
Paste it into Figma, Illustrator or a web page. The </> button next to Export also gives it as a React component or CSS.

Questions

Common questions.

Can I convert a PNG of pixel art to SVG?

Yes. Import it in Baipix (File › Import an image, or drop it on the canvas), then Export › SVG. If it was scaled up, like a screenshot at 400%, Baipix finds the pixel grid and gets the original pixels back first.

Is it free?

Yes. Baipix is free and open source (MIT). It runs in your browser, with no account, and your drawings stay on your device.

Will the SVG look right in Figma or Illustrator?

Yes. Copy as SVG (Ctrl+Shift+C), then paste it on the canvas. Each color is one shape, the layers stay grouped, and there are no thin lines between pixels.

Why not one square per pixel?

It makes heavy files that are slow to edit, and many apps show thin lines between the squares when they scale them. Baipix merges pixels of the same color into one path instead.

Can I get it as code?

Yes. The </> button next to Export gives it as a React component, CSS, JSON or plain SVG, to copy or download.

Draw your first pixel.

Free and open source, under the MIT license. No account, and your drawings stay on your device.

Open the editor Run it locally