Question

我正在尝试使用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背景为黑色：

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

Answer 1

这对我有用：

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

它会自动将SVG调整为四个大小，并保持透明度。

Answer 2

您错过了mogrify的alpha参数，请参阅image magick's doc

你应该添加＆＃34; -alpha set＆＃34;它应该工作。

Answer 3

您应该使用-transparent选项设置将用作透明度通道的颜色，如果* .svg为“white”，则使用此颜色。

请参阅http://www.imagemagick.org/script/command-line-options.php#transparent

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

-transparent white -format ico -resize 64x64

Answer 4

使用ImageMagick 6.9.9.27 Q16 Mac OSX和RSVG委托在版本RSVG 2.40.18下呈现SVG时，这对我很好。

/api/myendpoint

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

检查您拥有的渲染器

convert -background none test.svg test.png

看看SVG的行。我的节目

convert -list format

您的IM版本是什么以及您正在使用的SVG渲染器。如果安装了RSVG，可能只需升级RSVG，ImageMagick就可以找到它。

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

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

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

SVG  SVG       rw+   Scalable Vector Graphics (RSVG 2.40.18)

其中，识别-verbose显示每个级别都具有透明度。

使用透明背景将SVG转换为ICO

4 个答案: