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

sci*_*fic 2 svg imagemagick

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

mogrify -background transparent -format ico -density 600 -define icon:auto-resize=128,64,48,32,16 *.svg
Run Code Online (Sandbox Code Playgroud)

这是其中一个 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>
Run Code Online (Sandbox Code Playgroud)

生成的 ico 具有黑色背景:

在此处输入图片说明

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

Fra*_* Yu 9

这对我有用:

convert -background transparent -define 'icon:auto-resize=16,24,32,64' logo.svg favicon.ico
Run Code Online (Sandbox Code Playgroud)

它会自动将 SVG 大小调整为四种大小,同时保持透明度。


Tof*_*del 1

您缺少 mogrify 的 alpha 参数,请参阅image magick 的文档

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