将带有滤镜效果的 SVG 渲染为 PNG

Posted 2023-02-22

【中文标题】将带有滤镜效果的 SVG 渲染为 PNG

【英文标题】：Render an SVG with filter effects to PNG

【发布时间】：2015-02-11 01:02:47

【问题描述】：

我想将我创建的 SVG 渲染为高分辨率 (600 DPI) PNG。此 SVG 具有滤镜效果，特别是高斯模糊。

理想的渲染可以通过命令行完成。

我知道 SVG 是可渲染的，因为您可以在 Chrome/Chromium 中打开它，我希望看到的输出就在那里。

我尝试过的事情：

导入到 Adob​​e Illustrator

svg2png

图像魔术

墨景

我现在忘记的其他命令行工具和程序。基本上你可以在 Google 上找到任何东西。

我正在追求但坚持的当前路径：

知道 Chromium 可以很好地渲染 SVG 并且它是开源的，我想我会下载 Chromium 所依赖的库来渲染 SVG（Skia，https://sites.google.com/site/skiadocs/）并使用它来输出 PNG。到目前为止，我已经成功安装了 Skia 并运行了第一个示例。我找到了一个渲染 SVG (https://code.google.com/p/skia/source/browse/trunk/samplecode/SampleSVG.cpp?r=875) 的示例，但没有在我的 OSX 机器上成功运行它，并使用 XCode 和命令行工具的最新更新。该示例的修改版本（带有 gyp 文件）输出 PNG 将是惊人的。

其他可行的想法：

从 Chrome 获取像素数据（我该怎么做？由于图像的分辨率，一个简单的屏幕截图是不够的。我还想要一个可编写脚本的、可重复的过程。）

使用其他可以渲染 SVG 的图形库。也许这来自其他网络浏览器，也许不是。

【问题讨论】：

具有模糊效果的 SVG 示例：dropbox.com/s/9gqc4sf1x1irhsm/blue.svg?dl=0

【参考方案1】：

这似乎很好用：

webkit2png -F blue.svg -o rendered

-F 表示生成Full 分辨率的 PNG 并且没有缩略图，-o 指定输出文件名将是 rendered-full.png。

我已经减小了尺寸，使其适合 Stack Overflow，但显示的命令实际上给出了全分辨率 2880x2880 图像。

【讨论】：

谢谢！有什么方法可以控制 DPI？我想要一个超高 DPI 版本。

对于其他阅读本文的人，您可以使用-z 5 参数来增加 DPI，其中 5 是缩放级别。