用GraphicsMagick处理svg转png遇到的坑

1前言

用GraphicsMagick处理svg转png,且背景是透明且没有黑边,由于使用虚拟机的gm版本是1.3.28导致有黑边问题且svg中path中有opacity属性时,加上+antialias也无效,直接使用1.3.31版本就OK了

2 正文

2.1 gm1.3.28版本
gm1.3.28 版本有bug
GraphicsMagick 1.3.28 2018-01-20 Q16 http://www.GraphicsMagick.org/
Copyright (C) 2002-2018 GraphicsMagick Group.
Additional copyrights and licenses apply to this software.
See http://www.GraphicsMagick.org/www/Copyright.html for details.

1.默认转成png格式图片,会默认黑底

//以下三种是等价命令

gm convert -background none img.svg output.png 
gm convert -background transparent img.svg output.png 
gm convert -background "#000000ff" img.svg output.png  

 

2.若需要边框是其它颜色的代码(例如蓝色)如下:

gm convert -background "#00ff00ff" img.svg output.png

  

3.若设置颜色和图形边界颜色一样且path中的属性opacity存在,即使等于1(完全不透明),都会有默认黑色边框

gm convert +antialias -background none img.svg output.png

 

4.若设置颜色和图形边界颜色一样且path中的属性opacity不存在,即使等于1(完全不透明)也要去除改属性,则没有其它杂色边框

//+antialias 去除 除锯齿功能,则会把锯齿边颜色直接去掉,反之会默认补黑边,除非指定颜色

 gm convert +antialias -background none img.svg output.png

 

 5.左图使用-background "#00ff00ff",右图使用+antialias -background none

 

2.gm1.3.31版本

gm1.3.31 版本则直接使用

gm convert -background none img.svg output.png

就可以的,完美svg转png且保存背景透明

3 小结 

gm要使用最新版本,切记!

附注:

svg原图的内容如下:

<svg width="320pt" height="200pt" viewBox="0 0 320 200" version="1.1" xmlns="http://www.w3.org/2000/svg"> <g> <path fill="#ff0000" opacity = "1" d=' M 19.734,-31 Q 24,-31 24.141,-31 Q 24.141,-31 24,-31 Q 23.531,-29 23.391,-27 Q 23.234,-26 23.234,-20 L 31.281,-20 Q 34.922,-20 35.688,-20 L 35.688,-17 Q 35.078,-18 31.281,-18 L 23.234,-18 Q 23.688,-12 24.906,-8 Q 28.25,-12 29.609,-16 Q 33.109,-14 33.25,-14 Q 33.25,-13 32.656,-13 Q 31.891,-13 31.594,-12 Q 31.438,-12 30.984,-11 Q 28.547,-8 26.125,-5 Q 28.25,-2 31.734,-0 Q 32.656,-0 32.953,-5 Q 34.781,-3 36.453,-2 Q 34.781,3.641 33.25,3.641 Q 28.547,3.641 23.844,-3 Q 20.344,-1 16.25,1.359 Q 15.344,0 13.812,-1 Q 13.516,-1 13.516,-1 Q 18.375,-3 22.469,-6 Q 20.656,-12 20.5,-18 L 12.75,-18 L 12.75,-12 Q 14.875,-13 17.469,-14 Q 18.219,-14 18.531,-14 L 18.375,-10 Q 17.609,-10 16.406,-10 Q 15.188,-10 12.75,-9 L 12.75,-0 Q 13.359,2.438 6.219,3.188 Q 6.219,1.516 5.312,0 Q 5.156,-0 5.156,-0 Q 9.719,0 9.875,-2 L 9.875,-8 Q 5.156,-7 2.891,-6 L 1.672,-10 Q 5.922,-10 9.875,-12 L 9.875,-18 L 6.375,-18 Q 2.891,-18 2.125,-17 L 2.125,-20 Q 2.734,-20 6.219,-20 L 9.875,-20 L 9.875,-25 Q 10.016,-25 7.438,-25 Q 5.312,-24 3.953,-24 Q 3.344,-26 2.281,-27 Q 8.812,-27 15.797,-30 Q 16.25,-29 17.156,-29 Q 18.828,-27 18.531,-27 Q 18.375,-27 17.609,-27 Q 15.344,-27 12.75,-26 L 12.75,-20 L 20.344,-20 Q 20.344,-26 19.734,-31 M 29.156,-29 Q 31.594,-27 33.562,-24 L 30.516,-22 Q 29,-25 26.266,-27 L 29.156,-29 M 50.875,-28 L 50.875,-25 L 66.062,-25 L 66.062,-28 L 50.875,-28 M 50.875,-23 L 50.875,-19 L 66.062,-19 L 66.062,-23 L 50.875,-23 M 47.984,-14 L 68.328,-14 Q 71.828,-14 74.859,-15 L 74.859,-11 Q 72.281,-12 68.328,-12 L 59.672,-12 L 59.672,-8 L 63.938,-8 Q 67.125,-8 70.766,-8 L 70.766,-5 Q 69.25,-5 64.078,-5 L 59.672,-5 L 59.672,-0 Q 66.969,-0 69.094,-0 Q 71.672,-0 75.922,-1 Q 74.406,0.906 73.797,2.734 Q 58.156,2.438 55.281,1.219 Q 50.422,-0 48.891,-4 Q 46.469,0.156 43.438,3.188 Q 42.062,1.969 39.781,1.219 Q 46.469,-3 47.688,-10 Q 52.391,-10 51.938,-9 Q 51.938,-9 51.484,-9 Q 51.031,-8 50.875,-8 Q 50.719,-8 50.562,-7 Q 50.266,-7 50.109,-6 Q 52.234,-2 56.484,-1 L 56.484,-12 L 47.828,-12 Q 44.641,-12 41.766,-11 L 41.766,-15 Q 44.5,-14 47.984,-14 M 47.531,-31 Q 49.656,-31 52.391,-31 L 63.469,-31 Q 65.75,-31 69.547,-31 Q 69.25,-28 69.391,-27 L 69.391,-21 Q 69.25,-18 69.703,-17 Q 66.812,-17 65.609,-17 L 51.172,-17 Q 49.656,-17 47.375,-17 Q 47.688,-19 47.688,-21 L 47.688,-27 Q 47.688,-28 47.531,-31 M 96.281,-8 L 85.047,-8 L 82.156,0 L 78.359,0 L 88.828,-28 L 93.094,-28 L 103.109,0 L 99.016,0 L 96.281,-8 M 86.25,-11 L 94.906,-11 L 90.812,-24 L 90.656,-24 L 86.25,-11 M 123.906,-7 L 119.812,-7 L 119.812,0 L 116.469,0 L 116.469,-7 L 104.469,-7 L 104.469,-10 L 116.922,-27 L 119.812,-27 L 119.812,-10 L 123.906,-10 L 123.906,-7 M 116.312,-22 L 107.656,-10 L 116.469,-10 L 116.469,-22 L 116.312,-22 ' transform="translate(0,72) scale(1)" /> </g> <g> <path fill="#00ff00" opacity = "0.2" d=' M 19.734,-31 Q 24,-31 24.141,-31 Q 24.141,-31 24,-31 Q 23.531,-29 23.391,-27 Q 23.234,-26 23.234,-20 L 31.281,-20 Q 34.922,-20 35.688,-20 L 35.688,-17 Q 35.078,-18 31.281,-18 L 23.234,-18 Q 23.688,-12 24.906,-8 Q 28.25,-12 29.609,-16 Q 33.109,-14 33.25,-14 Q 33.25,-13 32.656,-13 Q 31.891,-13 31.594,-12 Q 31.438,-12 30.984,-11 Q 28.547,-8 26.125,-5 Q 28.25,-2 31.734,-0 Q 32.656,-0 32.953,-5 Q 34.781,-3 36.453,-2 Q 34.781,3.641 33.25,3.641 Q 28.547,3.641 23.844,-3 Q 20.344,-1 16.25,1.359 Q 15.344,0 13.812,-1 Q 13.516,-1 13.516,-1 Q 18.375,-3 22.469,-6 Q 20.656,-12 20.5,-18 L 12.75,-18 L 12.75,-12 Q 14.875,-13 17.469,-14 Q 18.219,-14 18.531,-14 L 18.375,-10 Q 17.609,-10 16.406,-10 Q 15.188,-10 12.75,-9 L 12.75,-0 Q 13.359,2.438 6.219,3.188 Q 6.219,1.516 5.312,0 Q 5.156,-0 5.156,-0 Q 9.719,0 9.875,-2 L 9.875,-8 Q 5.156,-7 2.891,-6 L 1.672,-10 Q 5.922,-10 9.875,-12 L 9.875,-18 L 6.375,-18 Q 2.891,-18 2.125,-17 L 2.125,-20 Q 2.734,-20 6.219,-20 L 9.875,-20 L 9.875,-25 Q 10.016,-25 7.438,-25 Q 5.312,-24 3.953,-24 Q 3.344,-26 2.281,-27 Q 8.812,-27 15.797,-30 Q 16.25,-29 17.156,-29 Q 18.828,-27 18.531,-27 Q 18.375,-27 17.609,-27 Q 15.344,-27 12.75,-26 L 12.75,-20 L 20.344,-20 Q 20.344,-26 19.734,-31 M 29.156,-29 Q 31.594,-27 33.562,-24 L 30.516,-22 Q 29,-25 26.266,-27 L 29.156,-29 M 50.875,-28 L 50.875,-25 L 66.062,-25 L 66.062,-28 L 50.875,-28 M 50.875,-23 L 50.875,-19 L 66.062,-19 L 66.062,-23 L 50.875,-23 M 47.984,-14 L 68.328,-14 Q 71.828,-14 74.859,-15 L 74.859,-11 Q 72.281,-12 68.328,-12 L 59.672,-12 L 59.672,-8 L 63.938,-8 Q 67.125,-8 70.766,-8 L 70.766,-5 Q 69.25,-5 64.078,-5 L 59.672,-5 L 59.672,-0 Q 66.969,-0 69.094,-0 Q 71.672,-0 75.922,-1 Q 74.406,0.906 73.797,2.734 Q 58.156,2.438 55.281,1.219 Q 50.422,-0 48.891,-4 Q 46.469,0.156 43.438,3.188 Q 42.062,1.969 39.781,1.219 Q 46.469,-3 47.688,-10 Q 52.391,-10 51.938,-9 Q 51.938,-9 51.484,-9 Q 51.031,-8 50.875,-8 Q 50.719,-8 50.562,-7 Q 50.266,-7 50.109,-6 Q 52.234,-2 56.484,-1 L 56.484,-12 L 47.828,-12 Q 44.641,-12 41.766,-11 L 41.766,-15 Q 44.5,-14 47.984,-14 M 47.531,-31 Q 49.656,-31 52.391,-31 L 63.469,-31 Q 65.75,-31 69.547,-31 Q 69.25,-28 69.391,-27 L 69.391,-21 Q 69.25,-18 69.703,-17 Q 66.812,-17 65.609,-17 L 51.172,-17 Q 49.656,-17 47.375,-17 Q 47.688,-19 47.688,-21 L 47.688,-27 Q 47.688,-28 47.531,-31 M 96.281,-8 L 85.047,-8 L 82.156,0 L 78.359,0 L 88.828,-28 L 93.094,-28 L 103.109,0 L 99.016,0 L 96.281,-8 M 86.25,-11 L 94.906,-11 L 90.812,-24 L 90.656,-24 L 86.25,-11 M 123.906,-7 L 119.812,-7 L 119.812,0 L 116.469,0 L 116.469,-7 L 104.469,-7 L 104.469,-10 L 116.922,-27 L 119.812,-27 L 119.812,-10 L 123.906,-10 L 123.906,-7 M 116.312,-22 L 107.656,-10 L 116.469,-10 L 116.469,-22 L 116.312,-22 ' transform="translate(-4,150) scale(1.5)" /> </g> </svg> 

  

猜你喜欢

转载自www.cnblogs.com/fanbi/p/11022735.html