如何将图像文件从 SVG 转换为多尺寸 ICO 而不模糊(清晰)
How to convert an image file from SVG to a multi-size ICO without blur (sharp)
我一直在使用 ImageMagick,但它产生的结果非常模糊。
convert -density 300 ../images/favicons/procensus.svg -background transparent -colors 256 -define icon:auto-resize favicon2.ico
它似乎以 300 密度渲染图像,然后针对图标中的所有其他尺寸使用高斯滤波器调整其大小。
我真正想让它做的是用 shape-rendering="crispEdges" 在网站图标中的每个像素大小重新渲染。
我希望 ImageMagick(或任何其他工具)以每个提供的 .ico 密度重新渲染 SVG。
请注意,此工具应该只是我可以在构建包时使用的工具:Linux 的开源可安装软件。
使用测试 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
我已经开始配置 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
但图像魔法似乎不支持该属性。
我还在寻找更优雅的答案。
要求
在类 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=${size}x${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>
试试这个衬垫。 Self-explanatory我觉得。
convert -density 300 -define icon:auto-resize=256,128,96,64,48,32,16 -background none input.svg out.ico
我一直在使用 ImageMagick,但它产生的结果非常模糊。
convert -density 300 ../images/favicons/procensus.svg -background transparent -colors 256 -define icon:auto-resize favicon2.ico
它似乎以 300 密度渲染图像,然后针对图标中的所有其他尺寸使用高斯滤波器调整其大小。
我真正想让它做的是用 shape-rendering="crispEdges" 在网站图标中的每个像素大小重新渲染。
我希望 ImageMagick(或任何其他工具)以每个提供的 .ico 密度重新渲染 SVG。
请注意,此工具应该只是我可以在构建包时使用的工具:Linux 的开源可安装软件。
使用测试 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
我已经开始配置 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
但图像魔法似乎不支持该属性。
我还在寻找更优雅的答案。
要求
在类 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=${size}x${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>
试试这个衬垫。 Self-explanatory我觉得。
convert -density 300 -define icon:auto-resize=256,128,96,64,48,32,16 -background none input.svg out.ico