将SVG转换为PNG，使用ImageMagick在路径周围添加黑色边框。

Question

我正在使用macOS Mojave 10.14.3（18D109）操作系统。

我的ImageMagick详细信息（是通过Homebrew安装的）

convert -version
Version: ImageMagick 7.0.8-35 Q16 x86_64 2019-03-25 https://imagemagick.org
Copyright: © 1999-2019 ImageMagick Studio LLC
License: https://imagemagick.org/script/license.php
Features: Cipher DPC HDRI Modules OpenMP 
Delegates (built-in): bzlib freetype heic jng jp2 jpeg lcms ltdl lzma openexr png tiff webp xml zlib

我有一个基本的 SVG（采用 W3Schools 的示例）：

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52">
  <path fill="#fff" d="M22 0 L33 52 L12 42 Z">
</path>
</svg>

这看起来是这样的（Gapplin）:

现在当我像这样将其转换为png格式:

convert -background none -density 9600 -resize 32x "myFile.svg" "myFile.png"

我获取了一张完美的图片，但它周围有黑色边框：

我尝试了所有与色彩或黑色有关的imagemagick命令选项的各种变化，但遗憾的是它从未达到我想要的效果-透明的背景，实心的白色路径（如SVG中的填充所描述）。

您有什么建议吗？

- zaitsman

Answer 1

在ImageMagick中，SVG文件可以由以下三种工具中的任何一种呈现：Imagemagick的MSVG/XML、RSVG代理和Inkscape，通常按照增加精度的顺序。

我刚刚尝试了使用Inkscape 0.92.4执行以下命令，结果完全是白色的。如果安装了Inkscape，则Imagemagick会自动使用它。但在这种情况下，它在该文件上运行不正常。

magick test.svg test2.png

如果我添加了“-background none”，它就可以正常工作。

magick -background none test.svg test2.png

我在透明背景上得到了一个白色三角形。

或者，如果我想要一个黑色背景。

magick -background black test.svg test2.png

当我强制Imagemagick使用MSVG时，我得到了一个白色三角形，在白色背景上有简单的黑色轮廓。所以根据您的评论，它仍然不正确。

magick MSVG:test.svg test2.png

如果我添加-background none，则会在透明背景上得到带有黑色轮廓的白色三角形。

magick -background none MSVG:test.svg test2.png

但是如果我只想要一个黑色的背景，那么

magick -background black MSVG:test.svg test2.png

我在黑色背景上看到了一个白色三角形。但我怀疑这个白色三角形比它周围的黑色边框稍小。

当我通过在delegates.xml文件中创建一个条目来强制使用RSVG 2.44.12版本时，我在透明背景上看到了一个白色三角形，我认为这就是您想要的结果。

magick RSVG:test.svg test3.png

或者

magick -background none RSVG:test.svg test3.png

您可以通过以下方式判断您的 Imagemagick 是否含有 MSVG/XML 或 RSVG：

magick -list format

寻找以SVG开头的行，并查看该行的结尾，它将指明XML或RSVG。使用此方法无法判断Inkscape。

检查您正在使用的SVG渲染器及其版本，以及libpng的版本。我的版本为1.6.36。

根据您提供的版本信息，我没有看到rsvp列出。因此，我假设您正在使用MSVG，但如果您已在系统上安装了Inkscape，则可能是Inkscape。

我在Mac OSX Sierra上使用的是Imagemagick 7.0.8.35 Q16。

- fmw42

---

因此，运行 magick -list format | grep SVG 我得到以下输出： MSVG SVG rw+ ImageMagick's own SVG internal renderer SVG SVG rw+ Scalable Vector Graphics (XML 2.9.4) SVGZ SVG rw+ Compressed Scalable Vector Graphics (XML 2.9.4)我没有安装InkScape。我尝试了 brew install librsvg，但这并没有将RSVG添加到magick格式中 :( - zaitsman

你需要安装带有Imagemagick的librsvg。因此，您可能需要重新安装两者。但我不是Homebrew的专家。因此，请与他们或其他人咨询。但是，如果您安装Inkscape，则Imagemagick将自动使用它。您无需像代表一样再次安装Imagemagick。 - fmw42

Answer 2

我在使用PHP将SVG转换为PNG时遇到了问题 - 路径周围有黑色线条。我在处理图像的服务器上安装了Inkscape，似乎解决了这个问题，无需更改代码。

- Dave Child

Answer 3

在我的情况下，切换转换器没有帮助。 因此，我尝试了SVG本身的实验。

将stroke-opacity="0"添加到SVG中（或者如果您不想让所有内容都没有轮廓，则添加到各个路径）有所帮助。

我认为转换器设置了一些默认的描边值，使它们可见，并且这定义了它们在SVG级别上是不可见的。

- Fanvaron