问如何将HTML5画布转换为SVG？

EN

试试canvas2svg.js。[Demo]

我自己也遇到了这个问题，并为此编写了一个库。当时，其他库有点稀疏，或者没有生成有效的SVG。

不过，基本概念是相同的。您将创建一个模拟画布2D上下文，然后在调用画布绘制命令时生成SVG场景图。基本上，您可以重用相同的绘图函数。根据传递给它的上下文，您可以绘制到标准的2D画布，也可以生成可以序列化的SVG文档。

您实际上不能“转换”已绘制到的画布元素，因为它只是一个位图，所以请记住这一点。当您导出到SVG时，您实际上只是使用假上下文再次调用相同的绘图函数。

举个简单的例子：

//create a canvas2svg mock context
var myMockContext = new C2S(500,500); //pass in your desired SVG document width/height

var draw = function(ctx) {
    //do your normal drawing
    ctx.fillRect(0,0,200,200);
    //etc...
}

draw(myMockContext);
myMockContext.getSerializedSvg(); //returns the serialized SVG document
myMockContext.getSvg(); //inline svg

canvas-svg可以让你保存2d http://code.google.com/p/canvas-svg/你可以用canvg http://code.google.com/p/canvg/做相反的事情

另请参阅http://code.google.com/p/html5-canvas-svg/

Fabric.js宣称有一个“画布到svg”解析器，它还有一个很明显是converts canvas to SVG的演示。如果你使用控件，然后“栅格化画布到”SVG，其他的项目确实可以工作，但它在转换默认图像时会出现问题，并且不会将所有对象导出为路径数据(例如，如果您将svg导入到fabric中而没有路径数据，则它不能在2020年前将其“向量化”)，因此您必须检查这是否真的能够将原始画布转换为SVG，或者仅当通过编辑器创建项目时才能转换。