Конвертировать SVG в прозрачный PNG с сглаживанием, используя ImageMagick - PullRequest
Новая
       72

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

59 голосов
/ 02 марта 2012

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

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

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

Ответы [ 6 ]

83 голосов
/ 02 сентября 2013

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

convert -background none in.svg out.png
55 голосов
/ 05 марта 2012

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

inkscape \
    --export-png=out.png --export-dpi=200 \
    --export-background-opacity=0 --without-gui in.svg
16 голосов
/ 30 мая 2012

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

-antialias

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

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

10 голосов
/ 11 января 2015

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

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

convert -density 200 in.svg -resize 25x25 -transparent white out.png
1 голос
/ 19 сентября 2018

Добавление опции -transparent white решает проблему, в частности, в моем случае, поскольку фон удален не полностью (к сожалению, присутствует легкая тень). Поэтому я использую ИМХО более ясное решение, которое полностью удаляет фон с ImageMagic:

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

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

0 голосов
/ 05 октября 2018

Я добавляю прямоугольник в качестве фона. Вставить 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 

#!/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="\([^"]*\)".*/\1/'`

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