如何將圖像文件從SVG轉換爲多尺寸ICO而不模糊（銳利）

Question

我一直在使用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的開放源碼可安裝軟件。

Answer 1

我得到它的工作配置shape-rendering="crispEdges"和做：

java -jar ~/Downloads/batik-1.8/batik-rasterizer-1.8.jar favicon.svg -d favicon-16.png -h 16 -w 16 
java -jar ~/Downloads/batik-1.8/batik-rasterizer-1.8.jar favicon.svg -d favicon-32.png -h 32 -w 32 
java -jar ~/Downloads/batik-1.8/batik-rasterizer-1.8.jar favicon.svg -d favicon-48.png -h 48 -w 48 
java -jar ~/Downloads/batik-1.8/batik-rasterizer-1.8.jar 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 

但它看起來像難懂的不支持該屬性。

我仍在尋找更優雅的答案。

Answer 2

使用測試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 

Answer 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=${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>