将由JavaScript生成的SVG转换为文件

Question

我正在使用d3.js来可视化一些数据。我想将其生成的SVG代码保存为.svg图像文件（以便在Inkscape/Illustrator中编辑）。我尝试过简单地复制svg标签的内容，例如：

<svg>
<!--snip-->
</svg>

将其存储到名为image.svg的文件中，但这会忽略颜色/样式信息，这些信息在两个单独的CSS文件中。

我正在使用 此示例。

有没有简单的方法可以做到这一点？

- Jason Sundram

---

你尝试过将CSS粘贴到<style>元素中吗？ - Marcin

是的，没有运气。我正在使用Inkscape和Safari查看生成的.svg文件。在Inkscape中，它显示为黑色斑点。在Safari中，我什么也看不到。 - Jason Sundram

@Marcin，一个简单的示例可以正常工作，但是那个好像失败了。不知道是不是对Inkscape来说太多了？ - Jason Sundram

Inkscape不适合用于查看SVG文件，它只能用于编辑。建议在Chrome中查看SVG文件。 - Marcin

@Marcin，我需要与设计师分享SVG文件，以便将其纳入出版物中，并确保他们可以正确导入和操作图形。 - Jason Sundram

如果你的设计师正在使用Inkscape，那么你就没什么运气了。如果他正在使用能够合理解释SVG的软件，那么可能会起作用。 - Marcin

Answer 1

这里有一个不错的方法可以使用svg-crowbar.js，为你的网站提供一个按钮，让你的用户可以将你的可视化作为SVG下载。

1) 定义按钮的CSS：

.download { 
  background: #333; 
  color: #FFF; 
  font-weight: 900; 
  border: 2px solid #B10000; 
  padding: 4px; 
  margin:4px;
}

2) 定义您按钮的 HTML/JS：

<i class="download" href="javascript:(function () { var e = document.createElement('script'); if (window.location.protocol === 'https:') { e.setAttribute('src', 'https://rawgit.com/NYTimes/svg-crowbar/gh-pages/svg-crowbar.js'); } else { e.setAttribute('src', 'http://nytimes.github.com/svg-crowbar/svg-crowbar.js'); } e.setAttribute('class', 'svg-crowbar'); document.body.appendChild(e); })();"><!--⤋--><big>⇩</big> Download</i>

这是同一段 JavaScript 代码的更详细解释：

javascript:(function (){ 
    var e = document.createElement('script'); 
    if (window.location.protocol === 'https:') { 
        e.setAttribute('src', 'https://rawgit.com/NYTimes/svg-crowbar/gh-pages/svg-crowbar.js'); 
    } else { 
        e.setAttribute('src', 'http://nytimes.github.com/svg-crowbar/svg-crowbar.js'); 
    } 
    e.setAttribute('class', 'svg-crowbar'); 
    document.body.appendChild(e); 
})();

3) 已完成。 这将生成一个可以在Inkscape中打开的svg下载文件。

注意: svg-crowbar.js 是从 https://rawgit.com 或 http://nytimes.github.com 加载的；您可能更喜欢将其集成到您的网站/文件夹中。

- Hugolpz

Answer 2

这篇文章虽然有些晚了，但使用D3.js来内联CSS非常简单。你只需要像这样做：

使用D3.js内联CSS很简单。您需要执行以下操作：

d3.json("../data/us-counties.json", function(json) {
  counties.selectAll("path")
      .data(json.features)
    .enter().append("path")
      .attr("fill", data ? quantize : null)
      .attr("d", path);
});

d3.json("unemployment.json", function(json) {
  data = json;
  counties.selectAll("path")
      .attr("fill", quantize);
});

function quantize(d) {
  return "hsla(120, 50%, 50%, " + Math.min(8, ~~(data[d.id] * 9 / 12)) + ")";
}

我的函数quantize只是为了演示而进行的快速hack，但您可以查看colorbrewer来找出将分位数应用于颜色的逻辑。

- methodofaction

Answer 3

这对我在Windows上的Chrome v16b和Safari v5.1有效：http://phrogz.net/SVG/chloropleth.html。 我所做的就是使用开发人员工具将SVG节点复制为HTML，将其粘贴到一个空文档中，并添加两个CSS文件的链接。在Safari中，这是否正确显示给您了呢？编辑：这里有一个独立的SVG文件：http://phrogz.net/SVG/chloropleth.svg。对于此文件，我添加了xmlns 属性以及外部链接。

<?xml-stylesheet href="http://mbostock.github.com/d3/ex/choropleth.css" type="text/css"?>
<?xml-stylesheet href="http://mbostock.github.com/d3/ex/colorbrewer.css" type="text/css"?>
<svg xmlns="http://www.w3.org/2000/svg"><!-- 1MB of data --></svg>

再次确认，已在Chrome和Safari中验证可用。

- Phrogz

---

当在浏览器中查看时，它看起来很棒。但是当下载并加载到inkscape中时，它仍然全部显示为黑色。你知道这是怎么回事吗？ - Jason Sundram

@JasonSundram 我不使用Inkscape。我猜测它不支持外部CSS引用。你可以尝试将这两个CSS的内容复制/粘贴到SVG中的<style>块中，看看是否会有所改善。我可以说Adobe Illustrator也显示为全黑色，因为它不支持外部CSS。 - Phrogz

Answer 4

有一个名为 "svg-grabber" (SVG导出是另一种选择) 的扩展程序，您可以尝试使用它，只需单击扩展图标即可，以下是stackoverflow页面的结果：

- luiscla27

Answer 5

这不是上面问题的答案，这仅适用于搜索如何转换的人

<svg>
...
<svg/>

转换为 .svg 文件。

只需使用编辑器（如 VS Code）打开任何不需要的 .svg 文件，并将所有现有代码替换为您的代码即可。

<svg>
...
<svg/> 

并保存它。

- Ayaal Novgorodov