Преобразование SVG в прозрачный PNG с сглаживанием, используя ImageMagick


Я хочу конвертировать SVG-изображения в PNG-файлы с прозрачным фоном и сглаженными краями (используя полупрозрачные пиксели). К сожалению, я не могу заставить ImageMagick сделать сглаживание, края всегда выглядят ужасно. Вот что я попробовал:

convert +antialias -background transparent  in.svg -resize 25x25 out.png

любые идеи или другой инструмент командной строки я мог бы использовать?

6   52  

6 ответа:

Inkscape сделает это:

inkscape \
    --export-png=out.png --export-dpi=200 \
    --export-background-opacity=0 --without-gui in.svg

в качестве примечания я обнаружил, что получение прозрачности было немного сложно. Вместо того, чтобы использовать прозрачный, Я должен был использовать нет.

convert -background none in.svg out.png

на самом деле, читая документацию imagemagick:

- antialias

включение / выключение рендеринга сглаживающих пикселей при рисовании шрифтов и линий. По умолчанию объекты (например, текст, линии, полигоны и т. д.) сглаживаются при рисовании. Использовать + antialias, чтобы отключить добавление сглаживания краевых пикселей. Это приведет к уменьшению
количество цветов, добавленных к изображению только для цветов, которые непосредственно рисуются. То есть, нет смешанные > цвета добавляются при рисовании таких объектов.

the + antialias действительно отключить сглаживание.

способ, которым я узнал, как это сделать, был из методологии, найденной здесь: как конвертировать a .eps-файл с высоким качеством 1024x1024 .в JPG?

это та же идея, что и решение @halfer с inkscape--чтобы сначала поднять DPI-но вы можете сделать то же самое всего за imagemagick С помощью .

convert -density 200 in.svg -resize 25x25 -transparent white out.png

добавлять -transparent white опции решает проблему особенно в моем случае, потому что фон не удаляется полностью (К сожалению, легкая тень присутствует). Так что я использую IMHO более четким решение, которое полностью удаляет фон С ImageMagic:

convert -channel rgba -background "rgba(0,0,0,0)" in.svg out.png

Он устанавливает полностью прозрачный черный цвет в качестве фона через канал RGBA.

добавить прямоугольник в качестве фона. То добавьте в CSS спрятать фон. Затем я ловлю его цвет для установки прозрачного атрибута ImageMagick.


SVG-файл:

<?xml version="1.0" ?>
<!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg 
    version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    width="500px" height="500px"
    viewBox="0 0 500 500" 
    enable-background="new 0 0 500 500" 
    >
<defs>
    <style>
        #background { display: none; }
    </style>
</defs>
<rect id="background" x="0" y="0" width="500" height="500" fill="#e8e437"/>
<!-- beginning of the sketch -->
<g fill="#000" text-anchor="middle"font-size="112">
    <text y="350" x="192">OK</text>
</g>
<!-- end of the sketch -->
</svg>

bash script

#!/bin/bash


BASE_DIR=$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null && pwd )
SVG_DIR="$BASE_DIR/import"
PNG_DIR="$BASE_DIR/export"

for f in `ls $SVG_DIR/*.svg`
do
    g="$PNG_DIR/$(basename "$f" .svg).png"
    BGCOLOR=`grep 'id="background"' $f \
        | sed 's/.* fill="\([^"]*\)".*//'`

    convert $f -transparent "$BGCOLOR" $g
done