svg按需成像

时间:2012-07-05 19:42:39

标签: php node.js svg d3.js jquery-svg

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

2 个答案:

答案 0 :(得分:5)

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

如何执行此操作的简单示例:

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

我使用它非常成功地处理了使用libqrencode制作的不同尺寸和颜色的QR码。

答案 1 :(得分:3)

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

以下是关于如何做到的link

获得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); }