将具有滤镜效果的SVG渲染为PNG [英] Render an SVG with filter effects to PNG

问题描述

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

I would like to render an SVG I've created to a hi-res (600 DPI) PNG. This SVG has filter effects, specifically gaussian blur.

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

Ideally rendering could be done via the command line.

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

I know the SVG is renderable because you can open it in Chrome/Chromium and the output I'd like to see is there.

导入到Adobe Illustrator

Importing to Adobe Illustrator

svg2png

Imagemagick

Imagemagick

Inkscape

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

Other command-line tools and programs I'm forgetting right now. Basically anything you could find with 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和命令行工具的更新。输出PNG的示例的修改版本（带有gyp文件）将是惊人的。

Knowing that Chromium can render the SVG just fine and that it's open-source, I figured I'd download the library Chromium depends on to render SVGs (Skia, https://sites.google.com/site/skiadocs/) and use it to output a PNG. So far I've succeeded in installing Skia and running the very first example. I've found an example that renders an SVG (https://code.google.com/p/skia/source/browse/trunk/samplecode/SampleSVG.cpp?r=875) but haven't successfully run it on my OSX machine with the latest updates to XCode and command-line tools. A modified version of that example (with gyp file) that outputs a PNG would be amazing.

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

Getting pixel data from Chrome (how would I do that? A simple screenshot isn't enough because of the resolution of the image. I also want a scriptable, repeatable process.)

使用其他可以渲染SVG的图形库。

Using other graphics library that can render SVG. Maybe this comes from other web browsers, maybe not.

推荐答案

这似乎很好：

webkit2png -F blue.svg -o rendered

-F 表示生成 Full 分辨率PNG（无缩略图），以及 -o 指定输出文件名将为 rendered-full.png 。

The -F says to generate the Full resolution PNG and no thumbnails, and the -o specified that the output filename will be rendered-full.png.

我减少了大小，使其适合堆栈溢出，但是显示的命令实际上给出了全分辨率2880x2880图像。

I have reduced the size so it fits on Stack Overflow, but the command shown actually gives the full-resolution 2880x2880 image.

这篇关于将具有滤镜效果的SVG渲染为PNG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！