ImageMagick 将 SVG 转换为具有透明背景的 PNG

Question

我通过命令行使用 ImageMagick 将简单的 SVG 转换为具有透明背景的 PNG，但由于某种原因它不起作用。

我已经尝试过here提到的一些建议（

convert -background none in.svg out.png

和

convert -background transparent in.svg out.png

）但没有运气。

这是 SVG 的来源：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
    xmlns="http://www.w3.org/2000/svg"
    width="130" height="130"
    stroke-width="8"
    stroke="#303030" stroke-linejoin="round"
    style="background-color: rgba(255,255,255,0);"
>
<g transform="translate(65,65)">
    <path fill="red" d="M60,0 h-120 a60,60 0 0 1 120,0" />
    <path fill="white" d="M60,0 h-120 a60,60 0 0 0 120,0" />
    <circle fill="white" r="20" />
    <circle stroke-width="2" fill="white" r="10" />
</g>
</svg>

这是 ImageMagick

convert

的版本输出（在 Mac OS X 10.7.3 上运行）：

calyodelphi@dragonpad:~/pokemon-story $ convert -version
Version: ImageMagick 6.8.9-0 Q16 x86_64 2014-04-22 http://www.imagemagick.org
Copyright: Copyright (C) 1999-2014 ImageMagick Studio LLC
Features: DPC Modules
Delegates: bzlib djvu fftw fontconfig freetype gslib jng jpeg lcms ltdl lzma png ps tiff webp x xml zlib

关于我没有做正确（或根本没有）的事情有什么想法吗？

编辑

从 Timo 的建议中添加这一点信息：详细输出以查看 ImageMagick 在何处委托转换。看起来它正在使用 inkscape，我几乎已经确认（通过我自己直接使用 inkscape）没有成功渲染透明背景。

calyodelphi@dragonpad:~/pokemon-story $ convert -verbose -background transparent wiki-logo.svg wiki-logo-trans.png 
"inkscape" "wiki-logo.svg" --export-png="/var/tmp/magick-232uT59InIw0vnO" --export-dpi="90,90" --export-background="rgb(0%,0%,0%)" --export-background-opacity="0" > "/var/tmp/magick-232vUkxcro2TpS3" 2>&1
mvg:/var/tmp/magick-232yXpy3JTgdpkm=>/var/tmp/magick-232yXpy3JTgdpkm MVG 130x130 130x130+0+0 16-bit sRGB 552B 0.010u 0:00.000
wiki-logo.svg SVG 130x130 130x130+0+0 16-bit sRGB 552B 0.000u 0:00.000
wiki-logo.svg=>wiki-logo-trans.png SVG 130x130 130x130+0+0 16-bit sRGB 10.6KB 0.000u 0:00.009

Inkscape 版本是

Inkscape 0.48.2 r9819

潮汐

Answer 1

你做得正确，我刚刚尝试了你提供的两个命令（

convert -background none in.svg out.png

和

convert -background transparent in.svg

），它们都为我生成了一个带有透明背景的漂亮PNG。

这是两个输出图像：

     

我的版本信息（在 OS X 10.10.1 上）：

Version: ImageMagick 6.8.9-8 Q16 x86_64 2014-10-23 http://www.imagemagick.org
Copyright: Copyright (C) 1999-2014 ImageMagick Studio LLC
Features: DPC Modules
Delegates: bzlib freetype jng jpeg ltdl lzma png xml zlib

您可以使用附加的

-verbose

参数运行命令。这将向您显示 ImageMagick 是否使用哪个外部 'delegate' 软件进行 SVG 处理：

convert -verbose -background none in.svg out.png

抱歉我无法提供更多帮助。

编辑： 这是我的详细输出：

➜  /tmp  convert -background transparent -verbose in.svg out2.png
"inkscape" "in.svg" --export-eps="/var/tmp/magick-71670YVLm4mRNHwOZ" --export-dpi="90,90" --export-background="rgb(0%,0%,0%)" --export-background-opacity="0" > "/var/tmp/magick-71670DClhbmEIL8wY" 2>&1
mvg:/var/tmp/magick-71670MHFJb-BHacGd=>/var/tmp/magick-71670MHFJb-BHacGd MVG 130x130 130x130+0+0 16-bit sRGB 552B 0.000u 0:00.000
in.svg MVG 130x130 130x130+0+0 16-bit sRGB 552B 0.000u 0:00.000
in.svg=>out2.png MVG 130x130 130x130+0+0 16-bit sRGB 10.6KB 0.010u 0:00.009

Answer 2

难道图片的背景是白色的，所以永远不会透明吗？

style="background-color: rgba(255,255,255,0);"

Answer 3

到了 2022 年，这对我来说仍然是一个问题。我发现更换

  <delegate decode="svg:decode" stealth="True" command="&quot;inkscape&quot; &quot;%s&quot; --export-png=&quot;%s&quot; --export-dpi=&quot;%s&quot; --export-background=&quot;%s&quot; --export-background-opacity=&quot;255&quot; &gt; &quot;%s&quot; 2&gt;&amp;1"/>

与

  <delegate decode="svg:decode" stealth="True" command="&quot;inkscape&quot; &quot;%s&quot; --export-filename=&quot;%s&quot; --export-dpi=&quot;%s&quot; --export-background-opacity=0 2&gt;&amp;1"/>

in

/etc/ImageMagick-6/delegates.xml

就可以了。

Answer 4

我正在将 @xeruf 的评论转换为完整答案，因为我花了几个小时试图弄清楚这一点：

对于其他对此感到绝望的人：检查是否将 -background 参数放在任何文件参数之前！

换句话说：

# Wrong
magick in.svg -background none out.png
magick in.svg -background transparent out.png

# Right
magick -background none in.svg out.png
magick -background transparent in.svg out.png

Answer 5

此命令在 Imagemagick 6.9.12-50 Q16 Mac OSX Monterey 中使用您的 SVG 文件对我来说效果很好。

convert -background none test.svg x.png

也许您需要升级 Imagemagick 或安装 Inkscape 才能由 Imagemagick 用于渲染 SVG。