svg html转换器,html – 将嵌入的SVG转换为PNG到位

演示：

http://phrogz.net/SVG/svg_to_png.xhtml

>创建一个img并将其src设置为您的SVG。

>创建一个HTML5画布并使用drawImage()将该图像绘制到画布上。

>在画布上使用toDataURL()获取base64编码的PNG。

>创建一个img并将其src设置为该数据URL。

var mySVG = document.querySelector('…'), // Inline SVG element

tgtImage = document.querySelector('…'); // Where to draw the result

can = document.createElement('canvas'), // Not shown on page

ctx = can.getContext('2d'),

loader = new Image; // Not shown on page

loader.width = can.width = myTargetImage.width;

loader.height = can.height = myTargetImage.height;

loader.onload = function(){

ctx.drawImage( loader, 0, 0, loader.width, loader.height );

tgtImage.src = can.toDataURL();

};

var svgAsXML = (new XMLSerializer).serializeToString( mySVGElement );

loader.src = 'data:image/svg+xml,' + encodeURIComponent( svgAsXML );

然而，这个答案(和所有客户端只有解决方案)要求浏览器支持SVG，这可能使其无法满足您的特定需求。

编辑：此答案假设SVG可用作单独的URL。由于描述的问题in this question我不能得到上面的工作与嵌入在同一文档执行工作的SVG文档。

编辑2：该问题描述的问题已通过改进的Chrome和Firefox克服。仍然存在限制，即< svg>元素必须具有width =“…”height =“…”属性为Firefox允许它绘制到画布。和Safari目前拖动整个画布每当你绘制任何SVG到它(不管来源)，但that should change soon。