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

Question

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

Answer 1

您可以通过两个简单的步骤完成此操作：

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

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

Answer 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 HTML 并在数据 URI 中使用该 HTML 创建img元素，如上所示。

注意事项：

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