not allowed to navigate top frame to data
chrome浏览器阻止打开Data URI的地址是为了安全考虑，但是下载不是非得打开新的网页，给a标签添加download属性
 
// 添加
a.download = 'diagram.png';
本文旨在介绍如何在项目中配置和方便的使用svg图标。
本文以vue项目为例，当然在react中的使用原理基本相似。
svg图标可以直接通过img标签来使用，也可当做icon来使用。
本文是参考了鑫旭大佬的文章：SVG Sprite技术介绍。
安装svg-sprite-loader。通过vue-cli脚手架创建的项目默认情况下会使用 url-loader 对svg进行处理，所以需要处理下：
 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
 loader: 'url-loader',
 options: {
  limit: 10000
                                    vue-simple-svg（V2）
 一个简单的Vue.js插件，可让您使用动态加载.svg文件的组件作为嵌入式SVG，以便您可以轻松地以编程方式控制其样式。 无需jQuery。
 当您只需要将SVG文件作为组件，建议在许多情况下使用 。 构建此插件是为了解决库不适合的其他一些情况，这些情况是：
 动态加载SVG文件。 您不必在源代码中对文件名进行硬编码。 相反，您可以在渲染时指定它，甚至在渲染组件后也可以对其进行更改。
 轻松地以编程方式更改SVG的填充颜色或描边颜色，并且无需全局CSS使用。
$ npm install vue-simple-svg
 在您的主文件中初始化
// as a plugin
import VueSimpleSVG from 'vue-simple-svg'
Vue . use ( VueSimpleSVG )
// or as a com
NodeJS模块和CLI可以将许多svg文件快速转换为png。
 受和启发。 非常感谢他们。
 与的主要区别，它可以更快地收敛许多文件。 因此，它对多个文件使用一种PhantomJS指令，并同时打开许多网页。
用作NodeJS模块
笔记！ 以下所有功能均返回承诺。
 将所有svg从某个文件夹转换到另一个文件夹。
 const svg2png = require ( 'svg2png-many' ) ;
var srcDir = 'dir/with/source/svgs' ;
var dstDir = 'dir/with/result/pngs' ;
svg2png ( srcDir , dstDir ) . then (
  ( ) => console . log ( 'Done' ) ,
  // rejected with the list of all ha
                                    svg保存下载为图片，总体思路就是svg转码--->画在canvas上--->画在图片上--->下载
第一种是使用serializer将获取的svg转换为字符串，然后通过encodeURIComponent()转码
var svg = document.getElementById('mainsvg') // 获取svg
var serializer = new XMLSerializer()
var toExport = svg.cloneNode(true); // 克隆
                                    以上就是svg转换png，svg转png格式步骤分享了，经常使用图片会遇到各种格式，小伙伴们如果遇到打不开的图片格式，或是那种图片格式的缺点特别明显，就可以利用本文所介绍的方法转换成为常用格式jpg或者png来使用，无需寻求其他的办法了，为大家减少麻烦。文件上传成功后，在软件右侧的格式下拉框中，将转化后的图片格式设置为png即可。步骤四、为了确认最后的转换效果，我们将转换后的图片格式与上传时的图片格式进行对比，如图所示，发现软件成功的将我们上传的svg格式的文件转换成需要的png格式，这样看来，转换成功。
	  const link = document.createElement('a');
	  let blob = new Blob([r.data], { type: 'application/json' })
	  link.style.display = 'none'
	  link.href =.
                                    Vue-element-admin 的图标库，在本项目里面非常方便使用，但是其他项目也需要这个图标时，下载就非常麻烦， 需要翻代码。为了解决这个问题， 我在分析了svg的代码之后，实现了svg图片的在线下载。其主要思路就是将 SVG 内容转换为 image/svg+xml 格式，并将其放置在一个带有下载属性的 a 标签上，从而实现点击下载。
                                    第一种 前端创建超链接，通过a标签向后端发送get请求，需要给a标签添加一个download属性
这种写法是创造了一个a标签，把地址写到a标签里再用js调用点击，实现访问文件地址就是下载了
代码如下:
       @click="downloadFile(file.url,file.originalFilename, file.id, file.fileTye)"
可以看到左侧图片是一个jpg格式的，接下来我们就要把它转化成svg;
2.打开SVG在线编辑器，把图片导入
我们可以打开SVG在线编辑器，把图片再百年机器中打开根据我们需要的大小进行设置，如下图：
3.设置图片和背景图大小等选项
选中图片后，右侧对应的是修改图片的一些选项，包括图片透明度，大小，和旋转角度等设置
不选中图片，右侧对应的是背景图的设置选项，包括高宽大小和颜色；
3.保存图片
图片和背景图设置完成后保存图片
保存成功后，图片就成为了SVG格式的啦！
本文主要探讨JPG/PNG转SVG矢量格式并支持FILL的方法，介绍在线转换网站和通过illustator转换的经验。
应该说，国内网站很少用到SVG格式，在此之前我只是听过，而没有用过。前些天遇到一个外国网站，在重要的动画位置使用了SVG图片，当我想修改的时候发现里面大有乾坤，分享一下感想和经验。前提我想说，SVG格式适用于如LOGO、图标这类颜色并不多的图，颜色太鲜艳图还是谨