从浏览器下载动态生成的SVG文件

Question

如果我使用HTML SVG元素创建图像,我可以将其作为SVG文件下载提供给用户.例如,我可能想要加载SVG图像,对其应用一些基本转换,添加一些文本,然后让用户将结果下载为矢量图像.

那可能吗？我一直在做与Canvas类似的事情,但一直在努力创建矢量图像.当我今天早上看到它时,我不知道SVG元素是如此多才多艺,但是如果我能做到这一点就会很棒.

Answer 1

使用数据URI的简单解决方案:

var svg_root = document.getElementById('your_svg_root_element_here');
var svg_source = svg_root.outerHTML;
var svg_data_uri = 'data:image/svg+xml;base64,' + btoa(svg_source);
var link = document.getElementById('anchor_element');
link.setAttribute('href', svg_data_uri);

虽然它有效但是当点击链接时,浏览器会停止几秒钟.

这似乎是最简单的解决方案,应该与所有现代浏览器兼容.但是,它有一些明显的开销.如果其他人知道不同的解决方案(可能使用blob或类似的东西),请在这里添加另一个答案!