如何将图像文件从 SVG 转换为多尺寸 ICO 而不模糊（锐利）

Posted 2023-02-18

【中文标题】如何将图像文件从 SVG 转换为多尺寸 ICO 而不模糊（锐利）

【英文标题】：How to convert an image file from SVG to a multi-size ICO without blur (sharp)

【发布时间】：2017-01-08 10:15:38

【问题描述】：

我一直在使用 ImageMagick，但它产生的结果非常模糊。

convert -density 300 ../images/favicons/procensus.svg -background transparent -colors 256 -define icon:auto-resize favicon2.ico

它似乎以 300 密度渲染图像，然后使用高斯滤波器调整图标中所有其他尺寸的大小。

我真正想要它做的是在 favicon 中的每个像素大小处使用 shape-rendering="crispEdges" 重新渲染。

我希望 ImageMagick（或任何其他工具）以每个提供的 .ico 密度重新渲染 SVG。

请注意，此工具只能是我可以在构建包时使用的工具：适用于 Linux 的开源可安装软件。

【问题讨论】：

你需要把密度放在加载图片...convert -density xyz image.svg ...

是的，有点不那么模糊

您可能会发现最好的结果是使用两步过程。首先将您的 SVG 渲染为位图，例如 256x256。然后从中创建你的图标。

@PaulLeBeau 虽然如果你渲染到 256 然后缩小它不起作用，因为这些图像仍然是缩小的。您需要显式渲染每一个 :(

【参考方案1】：

试试这个衬里。我认为不言自明。

convert -density 300 -define icon:auto-resize=256,128,96,64,48,32,16 -background none input.svg out.ico

【参考方案2】：

我已经完成了配置shape-rendering="crispEdges" 的工作：

sudo apt install libbatik-java
rasterizer favicon.svg -d favicon-16.png -h 16 -w 16
rasterizer favicon.svg -d favicon-32.png -h 32 -w 32
rasterizer favicon.svg -d favicon-48.png -h 48 -w 48
rasterizer favicon.svg -d favicon-64.png -h 64 -w 64

convert favicon-16.png favicon-32.png favicon-48.png favicon-64.png favicon.ico

但看起来 image magick 不支持该属性。

我仍在寻找更优雅的答案。

【参考方案3】：

要求

在类 UNIX 操作系统（Linux、MacOS 等）上，下载并安装以下内容：

ImageMagick rsvg 转换 pngquant

脚本

将以下内容另存为build.sh：

#!/bin/bash

# Relative path to location of SVG file to make into ICO file.
ICON_PATH=../../images/edible.svg

ICON_BASE=$(basename "$ICON_PATH")
ICON_DIR=$(dirname "$ICON_PATH")
ICON_FILE="$ICON_BASE%*."
ICON_EXT="$ICON_BASE##*."

FAVICON_FILE=favicon
FAVICON_EXT=.ico

# This uses rsvg-convert to create crisp PNG icons.
for size in 16 32 64 128 150 192 512; do
  ICON_OUT=$ICON_FILE-$size.png
  DIMENSIONS=$sizex$size
  rsvg-convert -w $size -p 300 -d 300 $ICON_PATH > $ICON_OUT

  # Use ImageMagick to center the image and make it square.
  convert $ICON_OUT -gravity center -background transparent \
    -resize $DIMENSIONS -extent $DIMENSIONS temp-$ICON_OUT

  # Use 8-bit colour to reduce the file size.
  pngquant 256 < temp-$ICON_OUT > $FAVICON_FILE-$DIMENSIONS.png
done

# Merge the 16- and 32-pixel versions into a multi-sized ICO file.
convert \
  $FAVICON_FILE-16x16.png \
  $FAVICON_FILE-32x32.png \
  -colors 256 ../$FAVICON_FILE$FAVICON_EXT

# Create android icons.
mv $FAVICON_FILE-192x192.png android-chrome-192x192.png
mv $FAVICON_FILE-512x512.png android-chrome-512x512.png

# Create MS tile icon.
mv $FAVICON_FILE-150x150.png mstile-150x150.png

# Clean up the temporary files.
rm $ICON_FILE*png temp-$ICON_FILE*png

编辑文件，将ICON_PATH变量更改为要转换的SVG文件的位置，如：

ICON_PATH=../images/favicons/procensus.svg

运行脚本：

./build.sh

在当前目录中创建各种图标。

注意：请务必在运行此命令之前备份您的文件，因为它会擦除它在处理时创建的 PNG 文件。

浏览器配置

将以下文件另存为browserconfig.xml：

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square150x150logo src="/mstile-150x150.png"/>
            <TileColor>#da532c</TileColor>
        </tile>
    </msapplication>
</browserconfig>

【讨论】：

你不能用 librsvg 支持构建 imagemagick 吗？这可能会减少所需二进制文件的数量。使用pngquant 似乎很聪明。

无需编译软件即可工作的解决方案避免了跟踪库依赖关系和其他困扰从源代码构建的问题。随意建议使用集成 ImageMagick 和 librsvg 的说明进行编辑（也可以是一些可以完成这项工作的命令行参数）。

您的 bash 脚本启发我实现了自己的网站图标生成器，因此我得到了您的代码来制作这个类似的脚本。它为根文件夹生成 3 种尺寸（16、32 和 48）的 favicon.ico，将所有其他图标放在一个文件夹中，它还为 safari 生成黑色蒙版。它还要求颜色。它还会生成 site.webmanifest 和 browserconfig.xml，然后显示 html：github.com/gerardbm/dotfiles/blob/master/bin/.local/bin/…

【参考方案4】：

使用测试 SVG，我设法通过此命令获得了多尺寸 ico 文件 - 您可以根据需要更改尺寸。

convert procensus.svg -bordercolor white -border 0 \
      \( -clone 0 -resize 16x16 \) \
      \( -clone 0 -resize 32x32 \) \
      \( -clone 0 -resize 48x48 \) \
      \( -clone 0 -resize 64x64 \) \
      -alpha off -colors 256 favicon.ico

【讨论】：

抱歉还是模糊不清。

缺少-delete 0 不能将全尺寸的svg 添加到图标中。

在convert 之后添加-background none 作为第一个参数以保持透明度。