path png转svg_SVG2PNG(前台和后台将SVG转换为PNG)--amcharts导出png

在项目中用到了amcharts，amcharts图标统计插件是利用SVG实现的，其自带下载png功能，但是不支持IE以下浏览器。因此研究了SVG转换为png，最终实现的效果是将amcharts生成一张png写入一个excel并提供下载。(只支持IE9以上)

1.SVG简介:

SVG 意为可缩放矢量图形(Scalable Vector Graphics)。说白了就是利用xml定义图形。

SVG 使用 XML 格式定义图像。

例如一个简单的圆形:

My first SVG

结果:

注意:如果将SVG的父标签去掉也是正常使用的，比如:(用浏览器打开后缀为下面后缀为SVG的文件)

结果:

但是如果将SVG根标签的xmlns属性去掉是不会显示为图形的，比如:

总结:SVG如果正常显示为图形，需要在SVG根标签引入   xmlns="http://www.w3.org/2000/svg"

2.SVG转换为PNG

会研究前台JS生成和后台利用batik生成png。所有用到的JS以及lib或者其他会在最后提供github连接。

2.1前台转换(不支持IE)

需要的JS:saveSvgAsPng.js   ，前台下载也比较简单。支持chrome、firefox等主流浏览器(Ie就不主流了。。。。。)

简单的测试:

My first SVG

download

functiondownloadSvg(){//下载的方法--第一个参数是SVG的顶级元素，第二个参数是文件名字

saveSvgAsPng(document.getElementById("testSvg"),"diagram.png");

}

2.2后台将SVG转换为PNG

(后台转换的时候svgCode的第一个元素必须是svg，而且必须有xmlns属性，而且有一个坑是SVG自带的clippath是小写，导致在裁剪转换的时候识别不了，所以必须将clippath转换为clipPath)

后台转换也就是将SVGCODE转换为PNG，注意SVGCODE是需要xmlns属性的，否则会转换失败。

采用的是batik1.7+JDK7(刚开始采用JDK8+batik1.8的时候转换pdf报错)。

1.依赖的jar包:(commons-io包是为了读取svgcode)

2.工程结构

3. 需要转换的SVGCODE:

直接浏览器打开效果:

4.转换的代码以及测试:

packagecn.qlq.svg2png;importjava.io.ByteArrayInputStream;importjava.io.File;importjava.io.FileOutputStream;importjava.io.IOException;importjava.io.OutputStream;importorg.apache.batik.tr