![](/img/trans.png)
[英]Transparent png overlay a SVG background as a CSS style in Wordpress
[英]ImageMagick to convert SVG to PNG with transparent background
我正在通過命令行使用 ImageMagick 將簡單的 SVG 轉換為具有透明背景的 PNG,但由於某種原因它無法正常工作。
我已經嘗試過這里提到的一些建議( convert -background none in.svg out.png
和convert -background transparent in.svg out.png
),但沒有運氣。
這是 SVG 的源代碼:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
width="130" height="130"
stroke-width="8"
stroke="#303030" stroke-linejoin="round"
style="background-color: rgba(255,255,255,0);"
>
<g transform="translate(65,65)">
<path fill="red" d="M60,0 h-120 a60,60 0 0 1 120,0" />
<path fill="white" d="M60,0 h-120 a60,60 0 0 0 120,0" />
<circle fill="white" r="20" />
<circle stroke-width="2" fill="white" r="10" />
</g>
</svg>
這是 ImageMagick convert
的版本輸出(在 Mac OS X 10.7.3 上運行):
calyodelphi@dragonpad:~/pokemon-story $ convert -version
Version: ImageMagick 6.8.9-0 Q16 x86_64 2014-04-22 http://www.imagemagick.org
Copyright: Copyright (C) 1999-2014 ImageMagick Studio LLC
Features: DPC Modules
Delegates: bzlib djvu fftw fontconfig freetype gslib jng jpeg lcms ltdl lzma png ps tiff webp x xml zlib
關於我做的不正確(或根本不正確)的任何想法?
編輯
從 Timo 的建議中添加這一點信息:詳細輸出以查看 ImageMagick 委派轉換的位置。 看起來它正在使用inkscape,我已經非常確認(通過自己直接使用inkscape)沒有成功渲染透明背景。
calyodelphi@dragonpad:~/pokemon-story $ convert -verbose -background transparent wiki-logo.svg wiki-logo-trans.png
"inkscape" "wiki-logo.svg" --export-png="/var/tmp/magick-232uT59InIw0vnO" --export-dpi="90,90" --export-background="rgb(0%,0%,0%)" --export-background-opacity="0" > "/var/tmp/magick-232vUkxcro2TpS3" 2>&1
mvg:/var/tmp/magick-232yXpy3JTgdpkm=>/var/tmp/magick-232yXpy3JTgdpkm MVG 130x130 130x130+0+0 16-bit sRGB 552B 0.010u 0:00.000
wiki-logo.svg SVG 130x130 130x130+0+0 16-bit sRGB 552B 0.000u 0:00.000
wiki-logo.svg=>wiki-logo-trans.png SVG 130x130 130x130+0+0 16-bit sRGB 10.6KB 0.000u 0:00.009
Inkscape 版本是Inkscape 0.48.2 r9819
浪潮
您做得對,我剛剛嘗試了您提供的兩個命令( convert -background none in.svg out.png
和convert -background transparent in.svg
),它們都為我生成了一個帶有透明背景的漂亮 PNG。
這是兩個輸出圖像:
我的版本信息(在 OS X 10.10.1 上):
Version: ImageMagick 6.8.9-8 Q16 x86_64 2014-10-23 http://www.imagemagick.org
Copyright: Copyright (C) 1999-2014 ImageMagick Studio LLC
Features: DPC Modules
Delegates: bzlib freetype jng jpeg ltdl lzma png xml zlib
您可以使用附加的-verbose
參數運行命令。 這將向您顯示 ImageMagick 使用哪個外部“委托”軟件進行 SVG 處理:
convert -verbose -background none in.svg out.png
抱歉,我無法提供更多幫助。
編輯:這是我的詳細輸出:
➜ /tmp convert -background transparent -verbose in.svg out2.png
"inkscape" "in.svg" --export-eps="/var/tmp/magick-71670YVLm4mRNHwOZ" --export-dpi="90,90" --export-background="rgb(0%,0%,0%)" --export-background-opacity="0" > "/var/tmp/magick-71670DClhbmEIL8wY" 2>&1
mvg:/var/tmp/magick-71670MHFJb-BHacGd=>/var/tmp/magick-71670MHFJb-BHacGd MVG 130x130 130x130+0+0 16-bit sRGB 552B 0.000u 0:00.000
in.svg MVG 130x130 130x130+0+0 16-bit sRGB 552B 0.000u 0:00.000
in.svg=>out2.png MVG 130x130 130x130+0+0 16-bit sRGB 10.6KB 0.010u 0:00.009
難道只是圖像有白色背景,所以它永遠不會透明嗎?
style="background-color: rgba(255,255,255,0);"
到 2022 年,這對我來說仍然是個問題。我發現更換
<delegate decode="svg:decode" stealth="True" command=""inkscape" "%s" --export-png="%s" --export-dpi="%s" --export-background="%s" --export-background-opacity="255" > "%s" 2>&1"/>
和
<delegate decode="svg:decode" stealth="True" command=""inkscape" "%s" --export-filename="%s" --export-dpi="%s" --export-background-opacity=0 2>&1"/>
在/etc/ImageMagick-6/delegates.xml
中就可以了。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.