将JavaScript生成的SVG转换为文件

我正在使用d3.js可视化一些数据。我希望能够获取它生成的SVG代码并将其存储为

.SVG

图像文件（用于在Inkscape/Illustrator中编辑）

我尝试过简单地复制svg标记的内容，即

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

输入一个名为image.svg的文件，但这会遗漏颜色/样式信息，这是在两个单独的CSS文件中

我和你一起工作

---

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

这在Windows上的Chrome v16b和Safari v5.1中对我很有效：

我所做的只是使用开发人员工具将SVG节点复制为HTML，粘贴到一个空白文档中，并添加到两个CSS文件的链接。这在Safari中是否正确显示

编辑：这里是一个独立的SVG文件：
为此，我在

和外部链接中添加了

xmlns

属性：

---

再一次，验证了它在Chrome和Safari中的可用性。

这已经很晚了，但是使用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只是一个快速的演示，但是你可以看看它，找出将分位数应用于颜色的逻辑。

这里有一个很好的方法，可以在你的站点上提供一个按钮，让你的用户将你的可视化下载为svg

1）定义按钮的CSS:

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

<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>

2）定义按钮的HTML/JS:

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

<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>

3）完成。这将生成一个svg下载，Inkscape可以打开

---

注意：svg-crowbar.js是从或加载的；您可能更愿意将其集成到您的网站/文件夹中。

有一个名为“”（）的扩展，您可以尝试它，只需单击扩展图标即可工作，这是stackoverflow页面的结果：

---

这不是上述问题的答案，这只是针对那些搜索如何转换的人

<svg>
...
<svg/>

...

到.svg文件

只需打开编辑器中不需要的任何.svg文件（如VS代码），并用您的

<svg>
...
<svg/> 

...

---

并保存它。

您是否尝试过将CSS粘贴到

元素中？是的，运气不好。我正在使用Inkscape和Safari查看生成的.svg。在Inkscape中，它显示为一个黑色斑点。在Safari中，我什么也得不到。@Marcin，一个简单的例子是有效的，但这个例子似乎失败了。不知道这对Inkscape来说是否太多了？Inkscape不适合查看SVG。这只是为了创作它。在Chrome中查看您的svg。@Marcin，我需要与将其合并到出版物中的设计师共享svg，并确保他们能够正确导入和操作图形。在浏览器中查看时，它看起来很棒。但当下载并加载到inkscape时，它仍然显示为黑色。你知道这是怎么回事吗？@JasonSundram我不知道；我不使用Inkscape。我猜它不支持外部CSS引用。您可以尝试将这两个CSS的内容复制/粘贴到SVG中的

块中，看看它是否变得更好。我可以说，Adboe Illustrator也显示为全黑色，因为它不支持外部CSS。