SVG按需转换为图像

Question

我有一段javascript代码，当一个人进入其中一页时，它会动态生成svg图像标签。我使用d3库来帮助生成图像。唯一的问题是d3不完全兼容IE，我想生成基于svg文件的.png、.jpg、.gif或其他任何图像文件。是否有已知的方法可以做到这一点？服务器端代码基于PHP，我们使用node.js和render.js来处理大量的动态内容。

- Jdahern

---

我想你也可以使用Raphael将SVG渲染到浏览器中 - 显然它也适用于IE。 - halfer

感谢您对 Raphael 的建议。不幸的是，Raphael 不支持我想要以与 d3 相同的方式显示的某些图像。 - Jdahern

啊，好的。我不知道这是否会在这里引导答案，但值得一试；你能编辑你的问题并注明那种图片是什么吗？这可能会激发某个人的灵感:) - halfer

Answer 1

我正在使用ImageMagick将SVG图像转换为PNG图像。这个工具的效果非常好。

以下是如何快速进行转换的示例：

exec('/usr/bin/convert /path/to/image.svg /path/to/output_image.png');

我使用这个方法来成功地处理由libqrencode生成的QR码，可以将它们转换成不同的大小和颜色。

- Repox

---

值得一提的是，ImageMagick使用了Librsvg库，你可以直接使用它（从Librsvg中使用rsvg-convert）。此外，Librsvg的渲染器只是一般般，所以你也可以尝试使用Inkscape，它也可以通过命令行转换为PNG格式。 - smparkes

谢谢。这有助于在与QR码无关的类别中。 - Jdahern

Answer 2

首先，您需要在服务器端使用DOM实现，因为您想获取在客户端呈现的SVG。为此，我们使用node.js中的jsdom。

使用这种方法，您可以在服务器端呈现D3，并在服务器上获取SVG，然后将其转换为任何您喜欢的格式。

以下是如何执行此操作的链接。

一旦您获得了SVG和PNG，就可以使用modernizer.js。

1）使用Modernizr检查浏览器的兼容性。

2）然后根据兼容性加载SVG或PNG。

示例（JS解决方案）：

if (!Modernizr.svg) {
$("#logo").css("background-image", "url(fallback.png)");
}

例子（CSS 解决方案）：

.no-svg #logo { background-image: url(fallback.png); }

- VJ Sai