将 HTML5 中的 <svg> 保存为 PNG 或图片

Question

我使用D3 Javascript库生成了图表，并需要将其保存为PNG或SVG文件。是否有一些能够完成此任务的库？

我找到了这个https://github.com/sampumon/SVG.toDataURL，但在我的HTML5中它无法工作，在Firefox控制台中出现以下错误:

NS_ERROR_NOT_AVAILABLE: Component is not available [Interrompi per questo errore]

ctx.drawImage(img, 0, 0);

- Salvatore Dibenedetto

---

以下是如何使用Chrome的示例：http://bl.ocks.org/3831266 - methodofaction

谢谢！这个可以用……但是当我试图在Illustrator中打开文件时，它要求我验证文件。我收到了这个消息：此SVG无效。在打开之前进行验证。 - Salvatore Dibenedetto

找到一个XML验证器并确保它是有效的XML。如果一切看起来都没问题，那么请在您的问题中发布代码，我可以帮助您找到导致Illustrator出错的错误。 - methodofaction

另外，请确保在svg标签中包含XML命名空间，例如... d3.select('svg').attr("xmlns", "http://www.w3.org/2000/svg"); - methodofaction

Answer 1

这是一个来自developer.mozilla.org的示例，演示了如何使用canvas元素将SVG导出为PNG。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
           '<foreignObject width="100%" height="100%">' +
           '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
             '<em>I</em> like ' + 
             '<span style="color:white; text-shadow:0 0 2px blue;">' +
             'cheese</span>' +
           '</div>' +
           '</foreignObject>' +
           '</svg>';

var DOMURL = window.URL || window.webkitURL || window;

var img = new Image();
var svg = new Blob([data], {type: 'image/svg+xml'});
var url = DOMURL.createObjectURL(svg);

img.onload = function () {
  ctx.drawImage(img, 0, 0);
  DOMURL.revokeObjectURL(url);
  var png_img = canvas.toDataURL("image/png");
}

img.src = url;

- Rafał R

---

无法通过选择检查器上的<svg>元素来使用。 - brauliobo

哇塞！那个起作用了。 - Costa Michailidis

太棒了！成功了。 - undefined

Answer 2

这个扩展程序适用于页面中的所有<svg>标签：https://chrome.google.com/webstore/detail/svg-export/naeaaedieihlkmdajjefioajbbdbdjgp?hl=en-GB

- brauliobo

---

这个扩展非常棒，而且非常容易使用。只需点击一次，你就可以看到页面上所有可用的SVG图形界面，并且可以按照你想要的任意尺寸进行导出。 - undefined

Answer 3

服务器端脚本方法

这是一种简单的保存 SVG 元素为 PNG 的方法（尽管它使用了服务器端脚本，可能与您预期的不同）：请查看this page。

正如作者所记录的那样，客户端提取 SVG 元素（使用 XMLSerializer.serializeToString），并将其发送到服务器；服务器将其转换为 PNG 并将其发送回客户端。服务器可以使用任何方便的程序（在此示例中为 rsvg-convert）。

Canvg 库

您可以使用此库在客户端上执行此操作(check it out!)：

canvg 是一个 SVG 解析器和渲染器。它接收指向 SVG 文件的 URL 或 SVG 文件的文本，在 JavaScript 中解析它，并在 Canvas 元素上呈现结果

像这样使用它：

//load a svg snippet in the canvas with id = 'drawingArea'
canvg(document.getElementById('drawingArea'), '<svg>... </svg>')

然后，您可以使用toDataURL方法： document.getElementById（'drawingArea'）.toDataURL（'image / png'）;

- wzhd