Wie man eine Bilddatei von SVG zu einem Multi-Size-ICO ohne Unschärfe konvertiert (scharf)

Question

Ich habe ImageMagick verwendet, aber es erzeugt ein sehr unscharfes Ergebnis.

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

Es scheint bei 300 Dichte wodurch das Bild ist, dann mit einem Gauß-Filter für alle anderen Größen in der Icon-Größe ändern, dass.

Was ich eigentlich will, ist Rendern mit shape-rendering="crispEdges" bei jeder Pixelgröße im Favicon.

Ich möchte ImageMagick (oder was anderes Werkzeug), um das SVG bei jeder bereitgestellten Dichte von .ico neu zu rendern.

Beachten Sie, dass dieses Tool nur ein Werkzeug sein sollte, das ich zur Zeit des Paket-Builds verwenden kann: eine Open-Source-Komponente installierbarer Software für Linux.

Answer 1

Ich habe arbeiten sie shape-rendering="crispEdges" und tun konfigurieren:

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 

Aber es sieht aus wie Image Magick nicht unterstützt dieses Attribut.

Ich bin immer noch auf der Suche nach mehr elegante Antworten.

Answer 2

Mit einem Test-SVG, ich habe es geschafft, eine multi-size ico-Datei mit diesem Befehl zu bekommen - Sie können die Größen wie nötig ändern.

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

Anforderungen

auf einem UNIX-ähnliches Betriebssystem (Linux, MacOS, etc.), herunterladen und installieren Sie das folgende:

• ImageMagick
• RSVG-konvertieren
• pngquant

Skript

die

Speichern folgenden als 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 

Bearbeiten Sie die Datei und ändern Sie die ICON_PATH Variable auf die Position der SVG-Datei zu konvertieren, wie zB:

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

Führen Sie das Skript:

./build.sh 

Im aktuellen Verzeichnis werden verschiedene Symbole erstellt.

Hinweis: Stellen Sie sicher, dass Sie Ihre Dateien sichern, bevor Sie diesen Befehl ausführen, da dadurch die PNG-Dateien gelöscht werden, die während der Verarbeitung erstellt werden.

Browser Config

Speichern Sie die folgende Datei als browserconfig.xml:

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