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. Unknown command 'run' - try 'help'

    /******************************************************************************* * Unknown command ' ...

  2. save tracking results into csv file for oxuva long-term tracking dataset (from txt to csv)

    save tracking results into csv file for oxuva long-term tracking dataset (from txt to csv) 2019-10-2 ...

  3. 转载：【TP5.0】TP5 Validate 验证规则

    下面是部分tp5内置的验证规则: 格式验证类: 'name'=>'require' 验证某个字段的值是否为数字(采用filter_var验证),例如: number 或者 integer 'na ...

  4. 2019年MTP管理技能提升培训笔记

    2019年MTP管理技能提升培训笔记 管理专题培训–MTP管理技能提升培训 高水准的问题分析解决 何为高水准 高 多层探寻,高度分析,即需要有深度 水 团队讨论,水平思考,即需要有广度 准 预防应变, ...

  5. lightgbm GPU版本安装

     python机器学习-乳腺癌细胞挖掘(博主亲自录制视频)https://study.163.com/course/introduction.htm?courseId=1005269003&u ...

  6. 异常值检验实战3_NBA球员表现稳定性分析

     机器学习_深度学习_入门经典(博主永久免费教学视频系列) https://study.163.com/course/courseMain.htm?courseId=1006390023&sh ...

  7. C# .net 高清压缩图片 合并图片方法

    /// <summary> /// 合并宽度一样的图片 /// </summary> /// <param name="imgUrls">多张图 ...

  8. win10 搜索栏输入后长期没反应

    博客转载自:https://blog.csdn.net/qq_40875146/article/details/81742533 Get-AppXPackage -Name Microsoft.Win ...

  9. Flutter的Padding、Raw、Column、Expanded组件的基本使用

    Padding组件: Padding组件的基本使用代码: import 'package:flutter/material.dart'; import 'package:flutter_testdem ...

  10. SDN实验---Ryu的应用开发（二）Learning Switch

    一:自学习交换机(二层MAC交换机)的编程思路 (一)明确问题 如何实现软件定义的自学习交换机? (二)设计解决方案 通过控制器来实现自学习交换算法,然后指导数据平面实现交换机操作 (三)确定具体的技 ...