svg格式文件转换为png图片文件

快要下班的时候，领导突然找我，发给我一个页面，说觉得这个页面的图标感觉不错，想把它做成图片放在项目里

我打开网页，用f12一看，用的是svg，这个我也不知道咋处理啊

但是遇到事情我们先不要慌，先在网上找找有没有解决办法
一顿搜索之下，我找到了两种解决办法：
第一种：不依赖任何外部库，同时仅仅通过浏览器端js便能实现的方法

首先，我们约定SVG的上下文结构是如下的：

<div class="svg-wrap">
//这里放置自定义的svg
  <svg>...</svg>
</div>

然后，我们就可以通过如下代码来将svg图形转为图片并下载了：

var svgXml = $('.svg-wrap').html();

var image = new Image();
image.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svgXml))); //给图片对象写入base64编码的svg流

var canvas = document.createElement('canvas');  //准备空画布
canvas.width = $('.svg-wrap svg').width();
canvas.height = $('.svg-wrap svg').height();

var context = canvas.getContext('2d');  //取得画布的2d绘图上下文
context.drawImage(image, 0, 0);

var a = document.createElement('a');
a.href = canvas.toDataURL('image/png');  //将画布内的信息导出为png图片数据
a.download = "MapByMathArtSys";  //设定下载名称
a.click(); //点击触发下载

这样子就将svg转成图片并且下载下来了

第二种：直接使用IE浏览器或Edge浏览器打开页面
然后右键点击图片，选择【图片另存为】。

修改保存类型为.png格式。

然后点击【保存】，就能看到透明的png图片文件了。

使用第二种方法，分分钟就搞定svg转成图片。

然后把领导需要的图片发给他，搞定下班~