使用 ImageMagick 将 SVG 转换为具有抗锯齿功能的透明 PNG

作为旁注，我发现获得透明度有点棘手。我不得不使用透明，而不是使用透明。

convert -background none in.svg out.png

---

Inkscape 会这样做：

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

更新

术语有 changed：所有导出参数都抑制 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

---

实际上，阅读 imagemagick 文档：

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

+antialias 确实会禁用抗锯齿。

---

我学习如何做到这一点的方法是从这里找到的方法：How to convert a .eps file to a high quality 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 通道设置完全透明的黑色作为背景。

---

对我来说，适用于 svg 到 png：

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

---

如果我将 -resize 替换为 -scale，我会得到更好的、已经很好的抗锯齿结果。然后，甚至不需要 antialias 标志。

---

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

---