如何将生成的 svg 代码保存到客户端计算机中的 .svg 文件中？答案

【问题标题】：How can I save my generated svg code to a .svg file in the client machine?如何将生成的 svg 代码保存到客户端计算机中的 .svg 文件中？
【发布时间】：2015-08-30 18:11:47
【问题描述】：

我使用 snap.svg 库通过加载其他外部 .svg 文件并操作它们以获得最终的 svg 元素，使用 javascript 在我的 asp.net 网页表单页面中生成一个 svg 元素。完成所需 svg 对象的组合并且生成的 svg 元素在我的页面中显示正常后，我需要将其保存为客户端计算机中的用户选择路径中的 .svg 文件。关于如何直接做到这一点的任何想法？我的意思是，不将代码发送到服务器，在服务器中生成文件，然后将文件下载到客户端。

【问题讨论】：

标签： javascript svg snap.svg

【解决方案1】：

您可以通过两个简单的步骤来做到这一点：

使用 new XMLSerializer().serializeToString(svg); 从 SVG 中获取字符串
使用 FileSaver.js 实际保存文件 (https://github.com/koffsyrup/FileSaver.js)

这应该适用于大多数情况（当然，Safari 除外）。

【讨论】：

在 Safari 上使用 Javascript 在本地保存文件非常困难/不可能。您可以在 github.com/eligrey/FileSaver.js/issues/12 找到有关此主题的大量讨论线程
好的，实际上只是一个带有 dataUrl 的链接和一个右键单击“将文件另存为...”的通知，这对于不支持 download 属性的浏览器就可以解决问题。
我试过了，但我得到的是“未捕获的 TypeError：无法在 'XMLSerializer' 上执行 'serializeToString'：参数 1 不是 'Node' 类型。”
@AnastasiosOikonomidis 那么您的 svg 参数不是 SVG 节点。在调用 XMLSerializer 之前尝试 "console.log(typeof svg)) 以查看您实际传递给函数的内容。

【解决方案2】：

您可以在 img 元素的数据 URI 中嵌入内联 SVG 代码：

<img src='data:image/svg+xml;charset=UTF-8,
<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>' />

保存不会自动启动，但用户可以右键单击 → 将图像另存为。 SVG 需要有xmlns="http://www.w3.org/2000/svg"，就像在 SVG 文件中一样。要嵌入现有的 SVG 元素，请获取其 outerHTML 并在数据 URI 中使用该 HTML 创建 img 元素，如上所示。

注意事项：

保存时，浏览器建议的默认文件名类似于download.svg，我认为您无法更改。
单引号 (') 不能在 SVG 中使用，因为它们用于表示数据 URI 的开始和结束位置。
之后你cannot modify SVG 的内容，因为它在img 标签中。
SVG 不会使用页面的样式，但是使用任何其他方法保存的 SVG 文件也会出现这个问题。

【讨论】：