Bitmap to svg path

Question

I don't know how to make this algorithm in JavaScript/Node.js that converts bitmaps into svg paths pixel by pixel:

// input
0 0 0 0 0 0 0 0 0 0 
0 0 0 0 0 0 0 0 0 0 
0 0 1 1 1 1 1 1 0 0 
0 0 1 1 1 1 1 1 0 0 
0 1 1 1 0 0 1 1 1 0 
0 1 1 1 0 0 1 1 1 0 
0 0 1 1 1 1 1 1 0 0 
0 0 1 1 1 1 1 1 0 0 
0 0 0 0 0 0 0 0 0 0 
0 0 0 0 0 0 0 0 0 0 

// output
<path d="M2 2 h6 v2 h1 v2 h-1 v2 h-6 v-2 h-1 v-2 h1 v-2 M4 4 v2 h2 v-2 z">

Does anyone know how the algorithm should work?

Any pseudocode would help.

Tools does the similar approach:

• https://github.com/59naga/pixel-to-svg
• https://github.com/brainshave/sharpvg
• https://codepen.io/shshaw/pen/XbxvNj
• http://drububu.com/tutorial/bitmap-to-vector.html

Jerrilyn

So Your question is "I'm creating an algorithm. I don't know how to make this algorithm"? – Shanda

yes, I will update the question – Jerrilyn

Answer 1

You can converts pixels to SVG path string like this.

Using this algorithm, I made script coverts pixel art to SVG.

http://defghi1977.html.xdomain.jp/tech/img2svg3/dot2svg3.htm

(Sorry this page is written in Japanese.)

Scoundrel

yes thats basically it, but the step from one to two got me into trouble, how did you joined the overlapping vectors in your algoritm? – Jerrilyn

For example, if a vector was presented by x:y:direction (string), the inverse of 0:0:right vector is 1:0:left. So you can push vector to (normal) object as key for searching inverse vector. – Scoundrel

I think that I have it, is your code available on internet? GitHub? By the way I have added more tools that solves the same problem and most of it comes form Japan :) look at the question – Jerrilyn