Как преобразовать файл изображения из SVG в многомерный ICO без размытия (резкое)

Я использую ImageMagick, но он дает очень размытый результат.

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

Кажется, что он рендерит изображение с плотностью 300, а затем изменяет его с помощью фильтра Гаусса для всех других размеров в значке.

То, что я на самом деле хочу, это сделать заново с помощью shape -render ="crispEdges" для каждого размера пикселя в значке.

Я хочу, чтобы ImageMagick (или любой другой инструмент) повторно отображал SVG при каждой предоставленной плотности.ico.

Обратите внимание, что этот инструмент должен быть только тем инструментом, который я могу использовать во время сборки пакета: часть устанавливаемого программного обеспечения с открытым исходным кодом для Linux.

Источник

5 ответов

Решение

У меня это работает, настраивая shape-render ="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

Но похоже, что магия изображения не поддерживает этот атрибут.

Я все еще ищу более элегантные ответы.

Источник

Попробуйте этот лайнер. Думаю, все понятно.

convert -density 300 -define icon:auto-resize=256,128,96,64,48,32,16 -background none input.svg out.ico
Источник

Используя тестовый 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
Источник

Требования

В 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>
Источник

Я долгое время был вариацией методов на этой странице — спасибо всем за участие. ❤️

Недавно я решил создать скрипт , который обрабатывает изображения за один шаг, который зависит от одного двоичного файла: среды выполнения Deno !

      # Install on shell
curl -fsSL https://deno.land/x/install/install.sh | sh
# … or see https://deno.land/manual@v1.31.1/getting_started/installation#download-and-install

Он использует порты WASM resvg и Image Magick, которые изначально поддерживаются в этой среде выполнения. Вы можете вызвать его таким образом:

      deno run \
       --import-map=https://raw.githubusercontent.com/mxdvl/mxdvl/main/deno/import-map.json \
       https://raw.githubusercontent.com/mxdvl/mxdvl/main/deno/scripts/ico.ts \
       mask-icon.svg output.ico

Поскольку Deno построен на безопасных основах, он запросит доступ к файловой системе.

Источник
Другие вопросы по тегам