将 SVG 转换为具有透明背景的 ICO答案

【问题标题】：Converting SVG to ICO with transparent background将 SVG 转换为具有透明背景的 ICO
【发布时间】：2017-01-03 19:10:14
【问题描述】：

我正在尝试使用 ImageMagick 将 svg 文件批量转换为 ico。但是，我当前使用的命令没有保留 svgs 的背景透明度。

mogrify -background transparent -format ico -density 600 -define icon:auto-resize=128,64,48,32,16 *.svg

这是其中一个 SVG 的代码（使用应用程序 Sketch 导出）：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
    <title>Add</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <polygon id="path-1" points="0 40 40 40 40 0 0 0"></polygon>
    </defs>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g>
            <g>
                <g>
                    <g transform="translate(20.000000, 20.000000) scale(1, -1) translate(-20.000000, -20.000000) ">
                        <g>
                            <g>
                                <mask id="mask-2" fill="white">
                                    <use xlink:href="#path-1"></use>
                                </mask>
                                <g></g>
                                <g mask="url(#mask-2)">
                                    <g transform="translate(-0.250000, 1.250000)">
                                        <g stroke-width="1" fill="none" transform="translate(0.075125, 8.043250)">
                                            <path d="M1.5,3.75 C0.765,3.75 0.175,3.06625 0.175,2.20875 C0.175,1.345 0.765,0.64875 1.5,0.64875 L12.49,0.64875 C13.22125,0.64875 13.825,1.345 13.825,2.20875 C13.825,3.06625 13.22125,3.75 12.49,3.75" fill="#8C8C8C"></path>
                                        </g>
                                        <g stroke-width="1" fill="none" transform="translate(0.058000, 24.804125)">
                                            <path d="M1.5,3.75 C0.775,3.75 0.1925,3.06625 0.1925,2.20875 C0.1925,1.345 0.775,0.64875 1.5,0.64875 L12.84125,0.64875 C13.56375,0.64875 12.88625,1.43125 12.88625,2.29375 C12.88625,3.1525 13.56375,3.75 12.84125,3.75" fill="#8C8C8C"></path>
                                        </g>
                                        <g stroke-width="1" fill="none" transform="translate(29.431125, 16.666875)">
                                            <path d="M1.5,3.75 C0.765,3.75 0.175,3.06625 0.175,2.20875 C0.175,1.345 0.765,0.6475 1.5,0.6475 L9.43375,0.6475 C10.16625,0.6475 10.76875,1.345 10.76875,2.20875 C10.76875,3.06625 10.16625,3.75 9.43375,3.75" fill="#444443"></path>
                                        </g>
                                        <g stroke-width="1" fill="none" transform="translate(12.898875, 0.017750)">
                                            <path d="M0,37.5 L0,0 C0,0 17.37,1.91625 17.37,17.925 C17.37,35.7 3.3325,37.5 0,37.5 Z" stroke="#8C8C8C" stroke-width="2.5"></path>
                                        </g>
                                        <polygon fill="#3C3C3C" points="40.25 8.68375 14.13625 8.68375 14.13625 28.5525 40.25 28.5525 40.25 8.68375"></polygon>
                                        <g stroke-width="1" fill="none" transform="translate(18.442125, 16.451375)">
                                            <path d="M2.5,3.75 C1.62375,3.75 0.9175,3.04875 0.9175,2.17375 C0.9175,1.2975 1.62375,0.58375 2.5,0.58375 L14.92375,0.58375 C15.7975,0.58375 16.52125,1.2975 16.52125,2.17375 C16.52125,3.04875 15.7975,3.75 14.92375,3.75" fill="#FFFFFF"></path>
                                        </g>
                                        <g stroke-width="1" fill="none" transform="translate(25.577125, 9.899875)">
                                            <path d="M0,2.5 C0,1.62125 0.70125,0.91625 1.5775,0.91625 C2.45125,0.91625 3.1675,1.62125 3.1675,2.5 L3.1675,14.9225 C3.1675,15.7975 2.45125,16.52 1.5775,16.52 C0.70125,16.52 0,15.7975 0,14.9225" fill="#FFFFFF"></path>
                                        </g>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

生成的 ico 具有黑色背景：

如何保持图标背景的透明度？

【问题讨论】：

也许去掉面具？
@RobertLongson 有趣的想法，但不幸的是它仍然产生了黑色背景
它在我的版本上运行良好 - 您使用的是 svg 还是（首选）rsvg 代表？
@MarkSetchell 你能解释一下你的意思吗？我正在使用 ImageMagick 6.9.6-6 Q16 x86_64 2017-01-03
试试identify -list delegate | grep svg，看看你是否使用rsvg来解释SVG文件。

标签： svg imagemagick

【解决方案1】：

这对我有用：

convert -background transparent -define 'icon:auto-resize=16,24,32,64' logo.svg favicon.ico

它会自动将 SVG 调整为四种尺寸，同时保持透明度。

【讨论】：

【解决方案2】：

您应该使用-transparent 选项来设置将用作透明度通道的颜色，在 *.svg 的情况下为“白色”。

见http://www.imagemagick.org/script/command-line-options.php#transparent

例如将 *.svg 转换为 *.ico 并保留透明度：

-transparent white -format ico -resize 64x64

【讨论】：

【解决方案3】：

您缺少 mogrify 的 alpha 参数，请参阅 image magick's doc

您应该添加“-alpha set”，它应该可以工作。

【讨论】：

使用“-alpha transparent”会生成完全白色的 .ico 文件。这是我使用的命令： mogrify -format ico -density 600 -alpha transparent -define icon:auto-resize=128,64,48,32,16 *.svg
尝试用“set”代替透明
with "set" 我仍然得到黑色背景的 .icos：mogrify -format ico -density 600 -alpha set -define icon:auto-resize=128,64,48,32,16 * .svg
你能详细说明你的意思吗？
执行命令“identify -list color”并复制/粘贴输出

【解决方案4】：

这对我使用 ImageMagick 6.9.9.27 Q16 Mac OSX 和 RSVG 代理在 RSVG 2.40.18 版本上渲染 SVG 非常有效。

convert -background none test.svg test.png

您可能需要安装 RSVG 代理或 Inkscape，因为 IM 内部的 MSVG/XML 渲染器不是那么好。您可以检查您使用的渲染器

convert -list format

然后查看 SVG 的行。我的节目

SVG  SVG       rw+   Scalable Vector Graphics (RSVG 2.40.18)

您的 IM 版本是什么，您使用的是什么 SVG 渲染器。如果你安装了 RSVG 并且 ImageMagick 可以找到它，也许你只需要升级它。

如果 ImageMagick 安装在您的系统中，它将使用 Inkscape（最好使用的一种）。否则，如果您将其安装为委托，它将使用 RSVG。否则，如果两者都不存在，则使用它自己的内部渲染器，这不是那么好。

如果这对您有用，那么您可以继续创建 ico 文件。

Mogrify 也适用于相同的系统配置：

mogrify -format ico -background none -density 600 -define icon:auto-resize=128,64,48,32,16 test.svg 

identify test.ico
test.ico[0] ICO 128x128 128x128+0+0 8-bit sRGB 99678B 0.000u 0:00.000
test.ico[1] ICO 64x64 64x64+0+0 8-bit sRGB 99678B 0.000u 0:00.000
test.ico[2] ICO 48x48 48x48+0+0 8-bit sRGB 99678B 0.000u 0:00.000
test.ico[3] ICO 32x32 32x32+0+0 8-bit sRGB 99678B 0.000u 0:00.000
test.ico[4] ICO 16x16 16x16+0+0 8-bit sRGB 99678B 0.000u 0:00.000

其中 identify -verbose 表示每个级别都有透明度。

【讨论】：