使用 ImageMagick 通过反锯齿将 SVG 转换为透明 PNG

我想转换 SVG 图像 PNG 文件与透明背景和反锯齿边缘(使用半透明像素)。不幸的是，我不能让 ImageMagick 做反锯齿，边缘总是看起来很糟糕。我试过这么做:

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

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

55115 次浏览
小开
最佳答案

墨水景观会做到这一点:

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
小开

实际上，阅读 image magick 文档:

反别名

当绘制字体和线条时，启用/禁用抗锯齿像素的呈现。 默认情况下，对象(例如文本、线条、多边形等)在绘制时是反别名的 + 反别名来禁用添加反别名边缘像素
添加到图像中的颜色的数量，仅仅是被直接绘制的颜色。也就是说，没有 在绘制这些对象时添加混合 > 颜色。

反别名确实会禁用反走样。

小开

顺便说一句，我发现获得透明度有点棘手。我必须使用 没有，而不是使用 透明的。

convert -background none in.svg out.png
小开

我学习如何做到这一点的方法是从这里发现的方法: 如何转换一个.eps 文件到一个高质量的1024x1024.jpg？

这与@halfer 使用 inkscape的解决方案的想法相同——首先提升 DPI ——但是您可以使用 -density选项在 imagemagick中完成同样的事情。

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

在我的例子中添加 -transparent white选项 特别解决了这个问题，因为背景没有被完全移除(不幸的是存在光影)。因此，我在 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 脚本

#!/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
小开

如果我用 -scale替换 -resize，我会得到更好的、已经很好的反锯齿化结果。

小开

对我来说，svg 到 png 的工作原理是:

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

提交答案