SVG 按需图像


svg to image on demand

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

我正在使用ImageMagick将SVG图像转换为PNG图像。这很有效。

如何执行此操作的快速示例:

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

我用它来处理使用 libqrencode 制作的 QR 码以不同的大小和颜色取得了巨大的成功。

首先,您需要在服务器端使用 DOM 实现,因为您希望获取在客户端呈现的 svg。为此,我们将 jsdom 与 node.js 一起使用。使用它,您可以在服务器端渲染 D3 并在服务器上获取 svg,然后将其转换为您喜欢的任何格式。

这是有关如何执行此操作的链接。

获得 SVG 和 PNG 后,请使用现代化器.js

1)使用现代化检查浏览器的兼容性。

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

示例(JS解决方案):

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

示例(CSS 解决方案):

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