当前版本的Inkscape支持“另存为:HTML5 canvas”。
它产生如下代码:
<!DOCTYPE html>
<html>
<head>
<title>Inkscape Output</title>
</head>
<body>
<canvas id='canvas' width='200' height='200'></canvas>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
// #layer1
// #rect3336
ctx.beginPath();
ctx.lineJoin = 'miter';
ctx.lineCap = 'butt';
ctx.lineWidth = 1.000000;
ctx.fillStyle = 'rgb(30, 144, 255)';
ctx.rect(0.000000, 88, 64.000000, 64.000000);
ctx.fill();
// #path4138
ctx.beginPath();
ctx.strokeStyle = 'rgb(255, 255, 255)';
ctx.lineWidth = 1.494353;
ctx.arc(32.000000, 120, 29.252823, 0.000000, 6.28318531, 1);
ctx.stroke();
</script>
</body>
Run Code Online (Sandbox Code Playgroud)
没有100%的解决方案,但有一些脚本库可以将svg的子集转换为canvas,例如http://code.google.com/p/canvas-svg/.还有实验性Path2D API可以将svg路径数据字符串绘制到画布上,但不确定它在浏览器中的支持程度.