使用 svg.js 将生成的 SVG 保存为 .svg 文件答案

【问题标题】：Save generated SVG with svg.js as .svg file使用 svg.js 将生成的 SVG 保存为 .svg 文件
【发布时间】：2020-07-10 07:12:50
【问题描述】：

我正在尝试将使用 svg.js 创建的元素在创建后自动保存为 .svg 文件。该库有 svg() 导出 SVG 的方法，但我还没有找到示例来学习如何使用它。例如，如果我想保存我在下面的代码中创建的 rect，我该怎么做呢？

html:

<!DOCTYPE html>
<html>
<head>
  <title>SVG.js</title>
  <script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
</head>
<body>

</body>
</html>

js:

var draw = SVG().addTo('body').size(300, 300);
var rect = draw.rect(100, 100).attr({ fill: '#f06' });

【问题讨论】：

“将形状保存为 SVG 文件”是什么意思？因为那不是一回事。您可以将 SVG documents 保存为 SVG 文件，但不是单个形状，您可以将其 outerHTML 代码保存为 sn-p，但它不是 SVG 文件：它肯定会失败SVG 验证，因为它缺少需要绕过它的部分。
我的错。我的意思是 SVG 文档中的 SVG 元素。例如 rect 元素或整个文档。
那么听起来你在问github.com/svgdotjs/svg.js/issues/131，我强烈建议你搜索你使用的开源问题跟踪器，因为这通常是第一个要问的地方（所以是你最后的手段） .
我看了看，但svg.export.js 描述说：从 SVG.js 的第 2 版开始，此功能包含在主库中。因此，如果您使用的是版本 2 及更高版本，则此插件已过时。无论如何我都会尝试使用它。
这就是我问的原因，因为我在 svg.js repo/docs 和问题跟踪器中都没有找到信息。

标签： javascript html svg svg.js

【解决方案1】：

在http://svgjs.dev 上有一个搜索栏，您可以在其中搜索export 并找到find what you are looking for：

可以使用 svg() 方法导出完整生成的 SVG 或其中的一部分：

draw.svg()

导出也适用于单个元素：

var rect = draw.rect()
var svg  = rect.svg()

现在您已经生成了一个包含您的 svg 的字符串。要将这个字符串下载为文件（创建文件），快速谷歌搜索会给你一个很好的solution：

function downloadString(text, fileType, fileName) {
  var blob = new Blob([text], { type: fileType });

  var a = document.createElement('a');
  a.download = fileName;
  a.href = URL.createObjectURL(blob);
  a.dataset.downloadurl = [fileType, a.download, a.href].join(':');
  a.style.display = "none";
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  setTimeout(function() { URL.revokeObjectURL(a.href); }, 1500);
}

// downloadString("a,b,c\n1,2,3", "text/csv", "myCSV.csv")

【讨论】：