您可以避免往返服务器。

Base64 编码您的 SVG xml。

然后生成指向该数据的链接。用户可以右键单击以将其保存在本地。

// This example was created using Protovis & jQuery
// Base64 provided by http://www.webtoolkit.info/javascript-base64.html
// Modern web browsers have a builtin function to this as well 'btoa'
function encode_as_img_and_link(){
 // Add some critical information
 $("svg").attr({ version: '1.1' , xmlns:"http://www.w3.org/2000/svg"});

 var svg = $("#chart-canvas").html();
 var b64 = Base64.encode(svg); // or use btoa if supported

 // Works in recent Webkit(Chrome)
 $("body").append($("<img src='data:image/svg+xml;base64,\n"+b64+"' alt='file.svg'/>"));

 // Works in Firefox 3.6 and Webit and possibly any browser which supports the data-uri
 $("body").append($("<a href-lang='image/svg+xml' href='data:image/svg+xml;base64,\n"+b64+"' title='file.svg'>Download</a>"));
}

img 标签在 Webkit 中有效，链接在 Webkit 和 Firefox 中有效，并且可以在任何支持 data-uri

使用FileSaver.js

saveAs(new Blob([SVG_DATA_HERE], {type:"image/svg+xml"}), "name.svg")

无需进行 base64 编码 - 您可以在其中创建包含原始 SVG 代码的链接。这是 The_Who 的回答中修改后的功能 encode_as_img_and_link() ：

function img_and_link() {
  $('body').append(
    $('<a>')
      .attr('href-lang', 'image/svg+xml')
      .attr('href', 'data:image/svg+xml;utf8,' +  unescape($('svg')[0].outerHTML))
      .text('Download')
  );
}

可能可以使用常规的“保存”浏览器命令，但它不仅会保存 SVG 画布，还会保存整个页面。

我相信您最好的选择是使用 AJAX 并将整个 SVG XML 数据作为 POST 数据发送到服务器脚本，并让该脚本仅将带有 header 的 POST 数据发送回Content-Disposition: attachment; filename=yourfile.svg。

（在 PHP 下，您可以使用file_get_contents('php://input').获取原始 POST 内容。）

使用Eli Gray 的FileSaver，我让它工作了（镀铬）：

bb = new window.WebKitBlobBuilder;
var svg = $('#designpanel').svg('get');
bb.append(svg.toSVG());
var blob = bb.getBlob("application/svg+xml;charset=" + svg.characterSet);
saveAs(blob,"name.svg");

SVG 来自基思伍兹 jquery 的 svg。

Html 摇滚 1

Html 摇滚 2