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>

　　

用GraphicsMagick处理svg转png遇到的坑的更多相关文章

  1. svg的学习

    svg的学习 1,初步了解 1,大致看了一下svg的简介,在图形的操作和展示上有很大的优势,例如不会失精:灵活的dom操作:很好的兼容性(IE需要下载插件).so,是一门值得深究的前端课程: 2,看了 ...

  2. web实时长图实践--摘抄

    背景简介 全民K歌专辑发布新玩法,传统宣传专辑战绩的流程,从获取数据,到制作海报,到传播,周期长运营成本高,如何快速分享战绩进行荣誉感的传播成为一个亟待解决的问题. 产品:能不能在专辑大事件触发时,自 ...

  3. webpack4配置详解之新手上路初探

    前言 经常会有群友问起webpack.react.redux.甚至create-react-app配置等等方面的问题,有些是我也不懂的,慢慢从大家的相互交流中,也学到了不少. ​ 今天就尝试着一起来聊 ...

  4. Gmagick convert SVG to PNG with transparent/opacity background

    1 前言 在Ubuntu18.04环境下,用gographics/gmagick API使用了以下代码未有效果 pw := gmagick.NewPixelWand() pw.SetOpacity(1 ...

  5. 【Web动画】SVG 实现复杂线条动画

    在上一篇文章中,我们初步实现了一些利用基本图形就能完成的线条动画: [Web动画]SVG 线条动画入门 当然,事物都是朝着熵增焓减的方向发展的,复杂线条也肯定比有序线条要多. 很多时候,我们无法人工去 ...

  6. 【Web动画】SVG 线条动画入门

    通常我们说的 Web 动画,包含了三大类. CSS3 动画 javascript 动画(canvas) html 动画(SVG) 个人认为 3 种动画各有优劣,实际应用中根据掌握情况作出取舍,本文讨论 ...

  7. SVG:textPath深入理解

    SVG的文本可以沿着一条自定义的Path来排布,比如曲线.圆形等等,使用方式如下所示(来源MDN): <svg viewBox="0 0 1000 300" xmlns=&q ...

  8. SVG:linearGradient渐变在直线上失效的问题解决方案

    SVG开发里有个较为少见的问题. 对x1=x2或者y1=y2的直线(line以及path),比如: <path d="M200,10 200,100" stroke=&quo ...

  9. HTML5_05之SVG扩展、地理定位、拖放

    1.SVG绘图总结: ①方法一:已有svg文件,<img src="x.svg">  方法二:<body><svg></svg>&l ...

随机推荐

  1. 分析WordPress数据表之评论表(功能篇)

    数据表分析 wp_comments(评论表) 该表字段,如下:comment_ID(评论ID)comment_post_ID(评论文章ID)comment_author(评论者用户名)comment_ ...

  2. Spring Cloud Ribbon源码分析---负载均衡实现

    上一篇结合 Eureka 和 Ribbon 搭建了服务注册中心,利用Ribbon实现了可配置负载均衡的服务调用.这一篇我们来分析Ribbon实现负载均衡的过程. 从 @LoadBalanced入手 还 ...

  3. Beef搭建并通过Nginx绑定域名

    Beef和Nginx安装过程这里就不再说明了相关链接:Beef官方安装教程 1. 修改Beef的config.yaml配置文件 xss连接地址改成要绑定的域名 sudo vim /beef/confi ...

  4. python mysql数据库压力测试

    python mysql数据库压力测试 pymysql 的执行时间对比 1,装饰器,计算插入1000条数据需要的时间 def timer(func): def decor(*args): start_ ...

  5. Docker运行图形化程序

    原理 Docker支持图形化程序,是利用Linux的X11技术. 相关文章 如何在Docker容器中启动D-Bus 引文详情 如何在Docker容器中启动D-Bus 翻译自 https://georg ...

  6. Git采坑与问题排查

    目录 Case1:代码库中存大文件 Case1:代码库中存大文件 背景 有这种情况,项目运行需要依赖一个文件(比如需要读一个文件中的数据),那么最直接的方式就是将该文件添加到代码中的分支中,然后将分支 ...

  7. SQL 对比,移动累计

    数据对比 两种常用模型 1.对比下一行,判断增长.减少.维持现状 -- 建表 drop table sales create table sales( num int, soc int ); inse ...

  8. EasyNVR摄像机网页无插件直播方案H5前端构建之：bootstrap弹窗功能的实现方案与代码

    前言介绍 在web前端的网页设计中,为了展示出简洁的网页风格和美观的效果,往往会使用弹窗效果在EasyNVR前端页面录像检索功能时,必然会播放录像,如果单独为播放录像文件排一个界面,用户在使用上会更加 ...

  9. eclipse Maven Dependencies pom

    <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...

  10. Docker实践之04-操作容器

    目录 一.查看容器列表 二.启动容器 三.终止容器 四.重启容器 五.后台运行容器 六.获取容器输出信息 七.进入容器 八.导出和导入容器 九.删除容器 一.查看容器列表 可以使用命令docker c ...