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:

• .html

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./59naga/pixel-to-svg
• https://github./brainshave/sharpvg
• https://codepen.io/shshaw/pen/XbxvNj
• http://drububu./tutorial/bitmap-to-vector.html

• javascript
• svg
• bitmap
• pixel
• svg-path

• 1 So Your question is "I'm creating an algorithm. I don't know how to make this algorithm"? – Mike B Commented Mar 4, 2017 at 11:23
• yes, I will update the question – pravdomil Commented Mar 4, 2017 at 11:24

1 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.)