将 JavaScript 生成的 SVG 转换为文件答案

【问题标题】：Convert JavaScript-generated SVG to a file将 JavaScript 生成的 SVG 转换为文件
【发布时间】：2012-01-16 03:47:27
【问题描述】：

我正在使用 d3.js 来可视化一些数据。我希望能够获取它生成的 SVG 代码并将其存储为 .svg 图像文件（用于在 Inkscape/Illustrator 中进行编辑）。

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

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

到一个名为 image.svg 的文件中，但这会遗漏颜色/样式信息，该信息位于两个单独的 CSS 文件中。

我正在与this example 合作。

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

【问题讨论】：

您是否尝试过将 CSS 粘贴到 <style> 元素中？
是的——不走运。我正在使用 Inkscape 和 Safari 查看生成的 .svg。在 Inkscape 中，它显示为黑色斑点。在 Safari 中，我什么也得不到。
@Marcin，一个简单的例子有效，但似乎失败了。想知道 Inkscape 是不是太过分了？
Inkscape 不适合查看 SVG。它仅用于编写它。在 Chrome 中查看您的 SVG。
@Marcin，我需要与将其合并到出版物中的设计师共享 svg，我想确保他们能够正确导入和操作图形。

标签： javascript css svg d3.js

【解决方案1】：

这适用于我在 Windows 上的 Chrome v16b 和 Safari v5.1：http://phrogz.net/SVG/chloropleth.html

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

编辑：这是一个独立的 SVG 文件：http://phrogz.net/SVG/chloropleth.svg
为此，我将xmlns 属性添加到<svg> 和外部链接：

<?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 中使用。

【讨论】：

在浏览器中查看时，它看起来很棒。但是当下载并加载到inkscape中时，它仍然显示为全黑。你知道这是怎么回事吗？
@JasonSundram 我不知道；我不使用 Inkscape。我的猜测是它不支持外部 CSS 引用。您可以尝试将这两个 CSS 的内容复制/粘贴到 SVG 中的 <style> 块中，看看它是否会变得更好。我可以说 Adboe Illustrator 也将其显示为全黑，因为它不支持外部 CSS。

【解决方案2】：

这已经很晚了，但是使用 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 只是用于演示的快速破解，但您可以查看 colorbrewer 来计算将分位数应用于颜色的逻辑。

【讨论】：

【解决方案3】：

这是使用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 加载的；您可能更愿意将其集成到您的网站/文件夹中。

【讨论】：

【解决方案4】：

有一个名为“svg-grabber”（svg export is another option）的扩展，你可以试试，它只需点击扩展图标即可，这是stackoverflow页面的结果：

【讨论】：

【解决方案5】：

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

<svg>
...
<svg/>

到 .svg 文件。

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

<svg>
...
<svg/>

并保存。

【讨论】：