使用 ImageMagick 将带有自定义字体的 SVG 转换为 PNG答案

【问题标题】：Converting SVG with custom fonts to PNG using ImageMagick使用 ImageMagick 将带有自定义字体的 SVG 转换为 PNG
【发布时间】：2012-03-23 09:48:09
【问题描述】：

我正在使用 ImageMagick 将 SVG 转换为 PNG，在我尝试使用 @font-face 然后在 SVG 文件中添加自定义字体之前，一切都像一个魅力。在 Batik 中这工作得很好，但现在在 ImageMagick 中我无法让它工作。

我可以将字体更改为“convert -list font”中列出的字体，但我可能不得不经常更改字体，所以我想以某种方式指向转换时的字体文件，而不是使用 font-face 或其他解决方案事情。

SVG 文件还可以包含多个字体系列，并且我的 ImageMagick 安装包括 rsvg 委托。

有什么想法吗？谢谢！

【问题讨论】：

如果您无法让 ImageMagick 正常工作，请考虑使用 inkscape 进行转换，也可以在命令行中调用。我不知道它对@font-face 的支持是什么样的，但如果你研究一下，我应该有兴趣知道。
我所有的 SVG -> PNG 都是使用 ImageMagick 做的，除了字体之外一切都很好。我将尝试使用 type.xml 安装它们，但我不希望这样做..
尽管如此，一个工作的 Inkscape 比一个部分工作的 ImageMagick 更好。考虑到在 CLI 上启动转换是多么容易，难道不值得一试吗？
是的，但我在使用 Batik 之前就可以使用它，但是由于我是从 PHP 运行它，所以我更喜欢可以从 PHP 使用的解决方案。 Batik 使用 system() 完成了这项工作，但速度很慢。稍后我会试一试 Inkscape，看看效果如何，到目前为止，ImageMagick 的速度给我留下了深刻的印象。
对于相当复杂的文档，我在开发笔记本电脑上的转换时间约为 0.7 秒 - 当然，与往常一样，这是“一段字符串有多长”并且高度依赖服务器的情况。但是再加上一个队列系统（在我的例子中是 Gearman），我认为这将是一个非常有效的解决方案。

标签： svg imagemagick

【解决方案1】：

试试librsvg2包提供的rsvg-convert（命令行程序）。

我在 Amazon Linux 上使用 ImageMagick 时遇到了同样的问题（但在我的 Ubuntu 桌面上没有）。我认为 ImageMagick 的 SVG 处理相当差。它无法正确识别“display: none”样式属性。

【讨论】：

我有一个从 Illustrator 导出的 SVG，并且字体没有被 rsvg-convert 正确渲染，直到我使用 fontType=SVGFontType.OUTLINEFONT 从 Illustrator 导出了 SVG（通过 JS API；也可能存在于 GUI 中)。

【解决方案2】：

在要求将 html 渲染到图像后，我得到了这个答案，但它也适用于 SVG：https://stackoverflow.com/a/56194265/118125

"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless --screenshot --window-size=256,256 --default-background-color=0 image.svg

它会根据 Google Chrome 将呈现的内容生成一个screenshot.png 文件。

【讨论】：

【解决方案3】：

Inkscape 可以从命令行运行。它有很多用于进行转换的选项（请参阅man inkscape），并且通过 --verb 和 --select 选项甚至可以像在 GUI 中那样执行操作。

正如halfer 指出的那样，转换速度也相当快。但是请注意，它的渲染器是为交互式显示而设计的，而不是 rsvg 所做的单通道静态显示，因此 rsvg 在某些情况下可能会更快。此外，在 Web 服务器上安装 Inkscape 有时可能会出现问题，这仅仅是因为此 GUI 应用程序引入了大量依赖项。

当我们向 Inkscape 添加这些命令行选项时，部分原因是 rsvg 缺乏对许多 SVG 功能的支持，包括字体。从那时起 rsvg 得到了改进，我认为它现在应该支持通过 font-face 属性替换字体。最常见的问题是将字体安装在 rsvg 看不到的地方（也许专有字体在您的发行版中保存在不同的路径中？）

祝你好运，如果你解决了，请告诉我们。

【讨论】：

【解决方案4】：

我曾经有一堆 SVG 文件，每个文件一页（一整本书）。字体是自动生成的，每页一个。字符编码是非标准的，我相信只有页面中实际使用的字符被放入字体中。尽管字体是使用 data-uris 嵌入到 SVG 中的，但我使用的任何程序（Imagemagick、Inkscape、rsvg-convert）都无法显示它们。只有 Firefox 能够正确呈现页面。这是我所做的：

首先我创建了一个包含所有页面的简单 HTML：

<html>
    <body>
         <img src="p001.svg" />
         <img src="p002.svg" />

等

然后，我在 Firefox 中打开了 HTML。花了一些时间，但它渲染了整本书。

然后，我将整个页面打印为 PDF。我首先将打印选项设置为不打印页眉/页脚。

结果是几兆字节的大型 PDF（其中还有光栅图像）。

不是最简单的解决方案，但它确实有效。遗憾的是，其他 SVG 渲染器都没有 Firefox 中的渲染器那么好。

希望这对某人有所帮助。

【讨论】：