使用ImageMagick使用抗锯齿将SVG转换为透明PNG


68

我想将SVG图像转换为具有透明背景和抗锯齿边缘(使用半透明像素)的PNG文件。不幸的是,我无法让ImageMagick进行抗锯齿,边缘总是看起来很糟糕。这是我尝试过的:

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

有什么想法或我可以使用的其他命令行工具吗?

Answers:


58

Inkscape将执行以下操作:

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

更新资料

术语已更改:所有导出参数都禁止使用gui,并且输出参数现在仅基于文件类型。例如,一种类型的png会导致将文件/path/to/picture.svg导入为/path/to/picture.png(警告:这会覆盖输出)。

inkscape \
    --export-type=png --export-dpi=200 \
    --export-background-opacity=0 picture.svg

注意,引用的Wiki上带有引号--export-type=png,这是不正确的。

另外,如果没有Inkscape命令行,MacOS可以通过bash直接访问:

/Applications/Inkscape.app/Contents/MacOS/inkscape

1
我发现的第一个解决方案是保留某些SVG的调色板,例如Apache NiFi的徽标(nifi.apache.org/assets/images/apache-nifi-logo.svg)。
timss,

2
如果Imagemagick现在已安装在系统上,它将使用Inkscape。您可以选择:Inkscape(如果在系统上),RSVG委托(必须与Imagemagick一起安装,或者必须与Imagemagick内部MSVG / XML一起安装。)
fmw42

105

作为附带说明,我发现获得透明度有点棘手。而不是使用的透明,我不得不使用

convert -background none in.svg out.png

至少在这个时候(6.8.6),它也与透明一起工作。
Martin Poljak 2014年

4
“无”和“透明”都会为我创建不透明的白色背景。不透明。我在Mac上使用6.8.8-3
petrsyn 2014年

4
-background none在Mac上为我工作的ImageMagick 6.8.6-6
commonpike 2014年

34
@petrsyn,尽管该命令将接受输入图像路径作为第一个参数(例如convert in.svg -background none out.png,我发现此顺序将无法使背景透明;它导致不透明的白色背景!请确保in.svgout.png最后两个参数)命令
。– kostmo

1
-background none根据图像魔术颜色名称文档的说明,确实是正确的:“还有一种名为'none'的颜色是完全透明的。该颜色是的简写rgba(0, 0, 0, 0.0)。”
icc97 '18

16

实际上,阅读imagemagick文档:

-抗锯齿

绘制字体和线条时启用/禁用抗锯齿像素的呈现。默认情况下,绘制对象时(例如文本,线条,多边形等)会消除锯齿。使用+ antialias禁用添加抗锯齿边缘像素。然后,这会将
添加到图像的颜色数量减少为仅直接绘制的颜色。也就是说,绘制此类对象时不会添加任何混合的>颜色。

+抗锯齿的确会关闭抗锯齿。



4

添加-transparent white选项可以解决该问题,尤其是在我的情况下,因为背景并未完全删除(不幸的是存在光影)。因此,我正在使用恕我直言的更清晰的解决方案,该解决方案可使用ImageMagic完全删除背景

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

它通过RGBA通道将完全透明的黑色设置为背景。


这是该-transparent选项的相关文档:imagemagick.org/script/command-line-options.php#transparent
icc97

1
经过一段时间的摆弄后,这是使其正常工作的唯一方法-非常感谢!

1

对我来说,可以将svg转换为png:

convert ${src} -transparent white -background none  -resize 345x345 res/drawable-xxxhdpi/${dest}

0

我添加一个矩形作为背景。嵌入的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

0

如果替换-resize为,我会得到更好的,已经很好的抗锯齿效果-scale。然后,该antialias标志甚至没有必要。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.