Javascript P

（1） 将HTML页面中的（动态生成的）SVG内容封装在具有唯一ID的div中，例如

SVG内容

（2） 包括一个按钮来调用JavaScript函数，例如

另存为SVG文件

（3） 在按钮标记中包含名为的JavaScript函数：

function sendSVG() 
{
   var svgText = document.getElementById('svg').innerHTML;

   var form = document.createElement("form");
   form.setAttribute("method", "post");
   form.setAttribute("action", "http://path-to-your-server-app");
   form.setAttribute("accept-charset", "UTF-8");

   var hiddenSVGField = document.createElement("input");    
   hiddenSVGField.setAttribute("type", "hidden");
   hiddenSVGField.setAttribute("name", "svgText");
   hiddenSVGField.setAttribute("value", svgText);

   form.appendChild(hiddenSVGField);
   document.body.appendChild(form);
   form.submit();
}

（4） 编写一个服务器应用程序来接受SVGtext post请求，并使用内容配置指定附件以image/svg+xml的形式返回。虽然我不是一名Perl程序员，也从未愤怒地使用过PHP，但本文介绍了三种语言的工作代码

Javaservlet

public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
   String svgText = (String) request.getParameter("svgText");
   response.setContentType("image/svg+xml");
   response.addHeader("Content-Disposition", "attachment; filename=\"image.svg\"");
   PrintWriter out = response.getWriter();
   out.println(svgText);
}

Perl CGI

use CGI qw(:standard);
my $svgText = param('svgText');
print header(-type => "image/svg+xml",
    -content_disposition => "attachment; filename=image.svg");      
print $svgText;

PHP

我在这里为图像使用了一个硬编码的名称（image.svg），但实际上提取了从页面生成的动态内容的描述者（再次使用div和ID，以及

document.getElementById（'graphName'）.textContent

）

这已经在Mac Safari 9、Firefox 42、Chrome 47、Opera 34、Windows7/IE 11和Windows10/Edge上进行了测试，在每种情况下都会下载svg文件或提示下载svg文件。生成的文件将在中打开，例如Adobe Illustrator或您设置为打开svg文件的任何其他应用程序

---

一个真实的例子（如果你认为学术研究是真实的）是在基因部分。

< P>我从建议中做了一个干净的/可用的书签。

它将在页面上的每个内联

旁边放置一个唯一的链接

---

---

希望它能帮助别人。

这是如何回答这个问题的？它没有将SVG保存在本地文件系统上，是吗？Scott：这会在它自己的页面中打开SVG，用户可以在其中自行将其保存到文件系统中。当我尝试时，会出现以下错误：“此页面包含以下错误：第1列第1行的错误：文档为空”-但错误可能在我这边。我知道我输入了正确的数据，所以我不知道是哪个错误。如何提取

SVG\u数据

document.getElementsByTagName（“svg”）

@yckart:document.getElementsByTagName（“svg”）[i].parentNode.innerHTML，其中i是要在document.get返回的HTMLCollectionr中导出的svg的键。如果页面中只有一个svn标记，则i=0。所有支持svg的浏览器也支持uri:s，好的，我在这里更详细地回答了一个类似的问题：我终于有了一个工作实现：。选择svg导出。验证最新Firefox和ChromeBase64从何而来？此示例使用的库完全是最干净的解决方案，几乎可以正常工作：Chrome正确显示数据uri中的图像，但不允许保存！Firefox更糟糕，因为它不知怎么地把数据弄得乱七八糟。使用HTML5，您还可以在链接中添加

download

属性，这对用户来说更容易。有关更多信息，如果文本包含Unicode字符，请使用

btoa（unescape（encodeURIComponent（svg）））

-不需要库。我认为您不理解这个问题。这个答案应该被投赞成票。

.attr（'href'，…）

的第二个参数实际上是原始的

…

代码。可以在Chrome和Safari上使用，但我还没有让它在Edge上使用。IE似乎是一刀切的禁区。对我来说，当源svg有一个以“#”结尾的xmlns URL时，这就打破了。在这种情况下，我们应该如何处理响应？你拯救了五一节！如果有，我会给你一块金子！链接断了，请看一看

var canvas = document.getElementById('your-canvas');
    if (canvas.getContext) {
        var C = canvas.getContext('2d');
    }

$('#your-canvas').mousedown(function(event) {
    // feel free to choose your event ;) 

    // just for example
    // var OFFSET = $(this).offset();
    // var x = event.pageX - OFFSET.left;
    // var y = event.pageY - OFFSET.top;

    // standard data to url
    var imgdata = canvas.toDataURL('image/png');
    // modify the dataUrl so the browser starts downloading it instead of just showing it
    var newdata = imgdata.replace(/^data:image\/png/,'data:application/octet-stream');
    // give the link the values it needs
       $('a.linkwithnewattr').attr('download','your_pic_name.png').attr('href',newdata);

});

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')
  );
}

function sendSVG() 
{
   var svgText = document.getElementById('svg').innerHTML;

   var form = document.createElement("form");
   form.setAttribute("method", "post");
   form.setAttribute("action", "http://path-to-your-server-app");
   form.setAttribute("accept-charset", "UTF-8");

   var hiddenSVGField = document.createElement("input");    
   hiddenSVGField.setAttribute("type", "hidden");
   hiddenSVGField.setAttribute("name", "svgText");
   hiddenSVGField.setAttribute("value", svgText);

   form.appendChild(hiddenSVGField);
   document.body.appendChild(form);
   form.submit();
}

public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
   String svgText = (String) request.getParameter("svgText");
   response.setContentType("image/svg+xml");
   response.addHeader("Content-Disposition", "attachment; filename=\"image.svg\"");
   PrintWriter out = response.getWriter();
   out.println(svgText);
}

use CGI qw(:standard);
my $svgText = param('svgText');
print header(-type => "image/svg+xml",
    -content_disposition => "attachment; filename=image.svg");      
print $svgText;

<?php
   $svgText = $_POST['svgText'];
   header('Content-type: image/svg+xml');
   header('Content-Disposition: attachment; filename="image.svg"'); 
   print "$svgText";
?>