如何在SVG上绘制形状与给定图像数据完全相同的Polyline对象

甜甜圈图片

例如，给定上面的图像，我想要做的是在SVG上绘制完全相同形状的折线对象(我创建了一个绘图"，或者我应该说基于SVG的画笔"工具，这就是为什么我使用折线，以便用户可以用鼠标绘画，甚至可以用橡皮擦使用他或她的鼠标).以下是我将如何实现这一目标.

For example, given image like above, what I want to do is draw the exact same shaped polyline object on SVG(Im creating a 'drawing' or should I say 'brush' tool based on SVG and that is why Im using polyline so that user can paint with his mouse or can even use eraser with his or hers mouse). And following is how I would achieve this.

1. 在画布上下文上绘制给定的图像.
2. 获取所有颜色为#000000的像素的坐标.
3. 使用该坐标列表在SVG上创建一条折线.

，通过此过程，我得到的结果是甜甜圈画板和svg折线 (现在这只是一个示例结果，它的外观很难看，因为我不得不用手画它.但是我的目的是要使输入图像的形状相同)

and by this process I get this as a result doughnut drawin with svg polyline(now this is just an example result that it is formed ugly because I had to draw it manually with my hand. But my purpose is to get same shaped with an input image)

但是我不确定这是否是唯一的方法，甚至不确定我是否应该坚持使用SVG.还有其他好的方法可以做到这一点吗?还是使用画布代替SVG会更容易?

But I'm not sure if this is the only way or even not sure if I should stick with SVG. Are there any other good ways to achieve this? or would using canvas instead of SVG make it easier?