如何将svg画布保存到本地文件系统?

Is there a way to allow a user, after he has created a vector graph on a javascript svg canvas using a browser, to download this file to their local filesystem?

在使用浏览器在javascript svg画布上创建了矢量图之后，是否允许用户将该文件下载到本地文件系统中?

SVG is a total new field for me so please be patient if my wording is not accurate.

SVG对我来说是一个全新的领域，如果我的措辞不准确，请耐心等待。

16 个解决方案

#1

It might be possible using the regular "Save" browser command, but it won't just save the SVG canvas, it will save the whole page.

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

I believe your best bet is to use AJAX and send the whole SVG XML data as POST data to a server script, and have that script just send back the POST data with the header Content-Disposition: attachment; filename=yourfile.svg.

我认为您最好的方法是使用AJAX并将整个SVG XML数据作为POST数据发送到服务器脚本，并让该脚本仅将POST数据发送到头部内容配置:附件;文件名= yourfile.svg。

(Under PHP, you can get the raw POST contents with file_get_contents('php://input').)

(在PHP中，可以使用file_get_contents(' PHP://输入')获取原始POST内容。)

#2

You can avoid a round trip to the server.

您可以避免往返于服务器。

Base64 encode your SVG xml.

Base64编码您的SVG xml。

Then generate a link to that data. The user can right click on to save it locally.

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

// 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>"));
}

The img tag works in Webkit, the link works in Webkit & Firefox, and may work in any browser which supports data-uri

img标签在Webkit中工作，链接在Webkit和Firefox中工作，并且可以在任何支持数据uri的浏览器中工作。

#3

There is no need to do base64 encoding - you can create a link with raw SVG code in it. Here is a modified function encode_as_img_and_link() from The_Who's answer:

没有必要使用base64编码——您可以在其中创建一个带有原始SVG代码的链接。这是一个修改的函数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')
  );
}

#4

Using FileSaver.js

使用FileSaver.js

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

#5

With FileSaver from Eli Grey I got it working (chrome):

在Eli Grey的文件中，我找到了工作(chrome):

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 is from keith woods jquery's svg.

SVG来自keith woods jquery的SVG。

Html Rocks 1

Html岩石1

Html Rocks 2

Html岩石2

#6

	// save SVG
	$('#SVGsave').click(function(){
		var a      = document.createElement('a');
		a.href     = 'data:image/svg+xml;utf8,' + unescape($('#SVG')[0].outerHTML);
		a.download = 'plot.svg';
		a.target   = '_blank';
		document.body.appendChild(a); a.click(); document.body.removeChild(a);
	});

#7

I recently found this Chrome plugin http://nytimes.github.io/svg-crowbar/. It's a bit buggy for my needs but essentially works.

我最近发现了这个Chrome插件http://nytimes.github.io/svg-crowbar/。这对我的需求来说有点小问题，但本质上是可行的。

I had previously made a solution similar to the accepted answer which involved a serverside script but it's quite long winded and also had the problem that all the styles had to be inline in the markup. Crowbar seems to take care of that for you, which is nice.

我以前做过一个类似于被接受的答案的解决方案，它涉及到一个服务器端脚本，但是它很长，并且有一个问题，所有样式都必须在标记中内联。Crowbar似乎是为你着想，这很好。

#8

I'm replying to this topic, even though it's a few years old, because the recent convergence of web browsers in their support for SVG and other relevant behaviour has produced renewed interest in SVG and allows a 'universal' answer to the question. In essence zneak's approach is correct but, in my opinion, terse (i.e. it took me a while to get it working for myself). I also think that his reference to AJAX is either unnecessary or not what I understand by AJAX (= uses an XMLHttpRequest). I shall therefore provide a more detailed answer using pure JavaScript (i.e. without JQuery or any other library) and provide server code for Java, Perl and PHP.

我正在回答这个主题，尽管它已经有几年的历史了，因为最近web浏览器在支持SVG和其他相关行为方面的融合已经引起了对SVG的兴趣，并允许对这个问题“通用”的答案。从本质上说，zneak的方法是正确的，但在我看来，terse(也就是说，我花了一段时间才让它为我自己工作)。我还认为他对AJAX的引用要么是不必要的，要么不是我所理解的AJAX(=使用XMLHttpRequest)。因此，我将使用纯JavaScript(即没有JQuery或任何其他库)提供更详细的答案，并为Java、Perl和PHP提供服务器代码。

(1) Have the (dynamically generated) SVG content in your HTML page enclosed in a div with a unique ID, e.g.

(1)将(动态生成的)SVG内容放在包含唯一ID的div中。

<div id="svg"><svg...>SVG content</svg></div>

svg < div id = " " > < svg…> < / SVG > < / div > SVG内容

(2) Include a button to invoke the JavaScript function, e.g.

(2)包括一个调用JavaScript函数的按钮。

<button onclick="sendSVG();">Save as SVG File</button>

<按钮onclick = " sendsvg();"> < /按钮>保存为SVG文件

(3) Include the JavaScript function named in your button markup:

(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) Write a server app to accept your SVGtext post request and return as image/svg+xml using Content-Disposition to specify an attachment. Working code in three languages is presented, although I am not a Perl programmer and have never used PHP in anger.

(4)编写一个服务器应用程序接受您的SVGtext post请求，并以图像/svg+xml的形式返回，以指定附件。虽然我不是一个Perl程序员，也从来没有在愤怒中使用过PHP，但仍然提供了三种语言的工作代码。

Java Servlet

Java Servlet

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

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

PHP

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

I have used a hard-coded name for the image here (image.svg), but actually pick up a discriptor of the dynamic content I generate from the page (using a div and an ID again, and document.getElementById('graphName').textContent).

我在这里使用了硬编码的图像名称(image.svg)，但实际上是从页面中获取了一个动态内容的discriptor(再次使用div和ID，以及document.getElementById('graphName'). textcontent)。

This has been tested on Mac Safari 9, Firefox 42, Chrome 47, Opera 34, and Windows7/IE 11 and Windows10/Edge and in each case the svg file is downloaded or one is prompted to download it. The resulting files will open in, e.g. Adobe Illustrator or whatever other application you have set to open svg files.

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

A real-world example of this (if you consider academic research real-world) is at http://flyatlas.gla.ac.uk/MidgutAtlas/index.html in the Gene section.

一个真实的例子(如果你认为学术研究是真实的)是http://flyatlas.gla.ac.uk/MidgutAtlas/index。基因部分的html。

#9

Yes is it possible. Use jquery.svg http://keith-wood.name/svgRef.html and post the svg xml data using the function svg.toSVG() (writing into a hidden field on submit). Have the php save and convert to raster using imagemagick (convert image.svg image.png) then force the file to download using header("Content-Type: application/octet-stream") and readfile the image.

是的它是可能的。使用jquery。svg http://keith . name/svgref.html并使用svg. tosvg()函数将svg xml数据发布到一个隐藏的字段中。使用imagemagick(转换图像)将php保存并转换为光栅。然后，使用header(“Content-Type: application/octet-stream”)强制文件下载并重新读取图像。

#10

Most compatible way would be a round-trip to the server. You could also use a data: URI in some browsers.

最兼容的方式是往返于服务器。您还可以在某些浏览器中使用数据:URI。

#11

You can't save anything with javascript to the local filesystem, what you should do is send the contents of the canvas to the server and make the user download and save that.

您不能将javascript保存到本地文件系统中，您应该做的是将画布的内容发送到服务器，并让用户下载并保存它。

#12

To answer my own question:

回答我自己的问题:

Another possibility though not the nicest is to display the serialized contents on the webpage and have the user select, copy and paste that. This after investigating eli grey's solution.

另一种可能不是最好的方法是在网页上显示序列化的内容，并让用户选择、复制和粘贴。这是在调查了伊莱格雷的解决方案之后。

#13

I maybe discovered a better way for not forcing the user to press right click "save image as". just live draw the canvas base64 code into the href of the link and modify it so the download will start automatically. i dont know if its universal browser compatible but it should work with the main/new browsers.

我可能发现了一个更好的方法，不强迫用户按右键点击“保存图像”。只需将画布base64代码绘制到链接的href中，并对其进行修改，这样下载就会自动启动。我不知道它的通用浏览器是否兼容，但它应该与主/新浏览器兼容。

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

});

feel free to wrap the a around anything you want, hope that helps a bit

你可以随意包装你想要的任何东西，希望这能有所帮助。

#14

$(document).ready(function(){	
 $("#btnDownload").click(function(){
	var $container = $('#svg-container'),
     // Canvg requires trimmed content
    content = $container.html().trim(),
    canvas = document.getElementById('svg-canvas');
	
	// Draw svg on canvas
    canvg(canvas, content);
	$container.hide();
    // Change img be SVG representation
    var theImage = canvas.toDataURL('image/jpeg');
	
	var a = document.createElement('a');
	a.href = theImage; // xhr.response es un blob file
	a.target = '_blank';
	a.download = 'prueba'; // nombre del archivo.
	a.style.display = 'none';
	document.body.appendChild(a);
	a.click();
	delete a;
});//fin function
});// fin 	

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script> 
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script> 
<input id="svgData" name="svgData" type="hidden"/>
<input id="btnDownload" type="button" value="Descargar"/>
<div id='svg-container'>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="font-family:'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="600" height="400"><desc>Created with Highcharts 4.0.4</desc><defs><clipPath id="highcharts-5"><rect x="-75" y="-75" width="750" height="550"></rect></clipPath></defs><rect x="0" y="0" width="600" height="400" strokeWidth="0" fill="#FFFFFF" class=" highcharts-background"></rect><g  style="stroke:rgba(255,255,255,0);"><path fill="rgb(255,255,255)" fill-opacity="0" d="M 59 79 L 460 61 L 456 287 L 65 330 Z"  stroke-linejoin="round"></path><path fill="rgb(255,255,255)" fill-opacity="0" d="M 65 330 L 456 287 L 456 286 L 65 330 Z"  stroke-linejoin="round"></path><path fill="rgb(230,230,230)" fill-opacity="0" d="M 0 0"  stroke-linejoin="round"></path></g><g  style="stroke:rgba(255,255,255,0);"><path fill="rgb(255,255,255)" fill-opacity="0" d="M 495 66 L 496 66 L 490 300 L 490 301 Z"  stroke-linejoin="round"></path><path fill="rgb(230,230,230)" fill-opacity="0" d="M 495 66 L 460 61 L 455 287 L 490 301 Z"  stroke-linejoin="round"></path><path fill="rgb(255,255,255)" fill-opacity="0" d="M 495 66 L 460 61 L 460 61 L 496 66 Z"  stroke-linejoin="round"></path></g><g  style="stroke:rgba(255,255,255,0);"><path fill="rgb(255,255,255)" fill-opacity="0" d="M 88 345 L 490 300 L 490 300 L 88 346 Z"  stroke-linejoin="round"></path><path fill="rgb(255,255,255)" fill-opacity="0" d="M 88 346 L 490 300 L 457 287 L 65 330 Z"  stroke-linejoin="round"></path><path fill="rgb(230,230,230)" fill-opacity="0" d="M 88 345 L 65 329 L 65 330 L 88 346 Z"  stroke-linejoin="round"></path></g><g class="highcharts-grid" ><path fill="none" d="M 146 75 L 146 75 L 150 320 L 175 336" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 189 73 L 189 73 L 191 316 L 217 331" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 230 71 L 230 71 L 232 311 L 259 326" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 271 69 L 271 69 L 271 307 L 300 322" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 310 67 L 310 67 L 310 302 L 339 317" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 349 66 L 349 66 L 348 298 L 378 313" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 387 64 L 387 64 L 385 294 L 416 308" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 424 62 L 424 62 L 421 290 L 454 304" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 461 61 L 461 61 L 457 286 L 491 300" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 103 77 L 103 77 L 108 325 L 131 341" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 59 79 L 59 79 L 65 329 L 87 345" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path></g><g class="highcharts-grid" ><path fill="none" d="M 59 78 L 59 78 L 461 60 L 496 66" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 61 144 L 61 144 L 460 119 L 494 127" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 62 206 L 62 206 L 459 175 L 493 185" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 64 269 L 64 269 L 458 232 L 492 243" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path><path fill="none" d="M 65 330 L 65 330 L 457 286 L 490 300" stroke="#C0C0C0" stroke-width="1"  opacity="1"></path></g><g class="highcharts-axis" ><path fill="none" d="M 75 325.5 L 525 325.5" stroke="#C0D0E0" stroke-width="1"  visibility="hidden"></path></g><g class="highcharts-axis" ><text x="556.96875"  text-anchor="middle" transform="translate(0,0) rotate(90 556.96875 200)" class=" highcharts-yaxis-title" style="color:#707070;fill:#707070;" visibility="visible" y="200">Values</text></g><g class="highcharts-series-group" ><g class="highcharts-series" visibility="visible"  transform="translate(75,75) scale(1 1)" clip-path="url(#highcharts-5)"><g  r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 390 141 L 408 139 L 406 226 L 388 228 Z"  stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 390 141 L 378 137 L 376 223 L 388 228 Z"  stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 390 141 L 378 137 L 395 136 L 408 139 Z"  stroke-linejoin="round"></path></g><g  r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 353 56 L 372 54 L 369 230 L 351 232 Z"  stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 353 56 L 342 53 L 339 227 L 351 232 Z"  stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 353 56 L 342 53 L 360 52 L 372 54 Z"  stroke-linejoin="round"></path></g><g  r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 314 118 L 333 117 L 332 235 L 313 237 Z"  stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 314 118 L 303 114 L 302 231 L 313 237 Z"  stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 314 118 L 303 114 L 322 113 L 333 117 Z"  stroke-linejoin="round"></path></g><g  r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 275 212 L 294 210 L 293 239 L 274 241 Z"  stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 275 212 L 264 207 L 283 205 L 294 210 Z"  stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 275 212 L 264 207 L 264 236 L 274 241 Z"  stroke-linejoin="round"></path></g><g  r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 235 94 L 255 93 L 254 243 L 235 246 Z"  stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 235 94 L 224 90 L 224 240 L 235 246 Z"  stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 235 94 L 224 90 L 244 89 L 255 93 Z"  stroke-linejoin="round"></path></g><g  r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 194 250 L 214 248 L 214 248 L 194 250 Z"  stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 194 250 L 184 245 L 204 243 L 214 248 Z"  stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 194 250 L 184 245 L 184 245 L 194 250 Z"  stroke-linejoin="round"></path></g><g  r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 152 131 L 173 130 L 173 253 L 153 255 Z"  stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 152 131 L 142 127 L 143 249 L 153 255 Z"  stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 152 131 L 142 127 L 163 126 L 173 130 Z"  stroke-linejoin="round"></path></g><g  r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 66 170 L 88 168 L 89 262 L 68 264 Z"  stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 66 170 L 57 165 L 59 259 L 68 264 Z"  stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 66 170 L 57 165 L 79 163 L 88 168 Z"  stroke-linejoin="round"></path></g><g  r="0" stroke="#7cb5ec" stroke-width="1"><path fill="#7cb5ec" d="M 23 206 L 44 204 L 45 267 L 24 269 Z"  stroke-linejoin="round"></path><path fill="rgb(99,156,211)" fill-opacity="1" d="M 23 206 L 14 201 L 15 264 L 24 269 Z"  stroke-linejoin="round"></path><path fill="rgb(149,206,255)" fill-opacity="1" d="M 23 206 L 14 201 L 36 199 L 44 204 Z"  stroke-linejoin="round"></path></g></g><g class="highcharts-markers" visibility="visible"  transform="translate(75,75) scale(1 1)" clip-path="none"></g></g><text x="300" text-anchor="middle" class="highcharts-title"  style="color:#333333;font-size:18px;fill:#333333;width:536px;" y="25"><tspan>3D chart with null values</tspan></text><text x="300" text-anchor="middle" class="highcharts-subtitle"  style="color:#555555;fill:#555555;width:536px;" y="53"><tspan>Notice the difference between a 0 value and a null point</tspan></text><g class="highcharts-legend"  transform="translate(270,364)"><g ><g><g class="highcharts-legend-item"  transform="translate(8,3)"><text x="21" style="color:#333333;font-size:12px;font-weight:bold;cursor:pointer;fill:#333333;" text-anchor="start"  y="15">Sales</text><rect x="0" y="4" width="16" height="12"  fill="#7cb5ec"></rect></g></g></g></g><g class="highcharts-axis-labels highcharts-xaxis-labels" ><text x="110" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="363" z="-59" opacity="1">Jan</text><text x="154" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="358" z="-40" opacity="1">Feb</text><text x="197" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="353" z="-22" opacity="1">Mar</text><text x="239" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="348" z="-3" opacity="1">Apr</text><text x="280" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="343" z="16" opacity="1">May</text><text x="320" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="338" z="35" opacity="1">Jun</text><text x="359" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="334" z="53" opacity="1">Jul</text><text x="398" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="329" z="72" opacity="1">Aug</text><text x="435" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="324" z="91" opacity="1">Sep</text><text x="472" text-anchor="middle" style="width:25px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="320" z="109" opacity="1">Oct</text></g><g class="highcharts-axis-labels highcharts-yaxis-labels" ><text x="502" text-anchor="start" style="width:55px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="301" z="122" opacity="1">0</text><text x="504" text-anchor="start" style="width:55px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="244" z="111" opacity="1">2</text><text x="505" text-anchor="start" style="width:55px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="187" z="100" opacity="1">4</text><text x="506" text-anchor="start" style="width:55px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="128" z="90" opacity="1">6</text><text x="508" text-anchor="start" style="width:55px;color:#606060;cursor:default;font-size:11px;fill:#606060;" y="69" z="79" opacity="1">8</text></g><g class="highcharts-tooltip"  style="cursor:default;padding:0;white-space:nowrap;" transform="translate(0,-9999)"><path fill="none" d="M 3 0 L 13 0 C 16 0 16 0 16 3 L 16 13 C 16 16 16 16 13 16 L 3 16 C 0 16 0 16 0 13 L 0 3 C 0 0 0 0 3 0"  stroke="black" stroke-opacity="0.049999999999999996" stroke-width="5" transform="translate(1, 1)"></path><path fill="none" d="M 3 0 L 13 0 C 16 0 16 0 16 3 L 16 13 C 16 16 16 16 13 16 L 3 16 C 0 16 0 16 0 13 L 0 3 C 0 0 0 0 3 0"  stroke="black" stroke-opacity="0.09999999999999999" stroke-width="3" transform="translate(1, 1)"></path><path fill="none" d="M 3 0 L 13 0 C 16 0 16 0 16 3 L 16 13 C 16 16 16 16 13 16 L 3 16 C 0 16 0 16 0 13 L 0 3 C 0 0 0 0 3 0"  stroke="black" stroke-opacity="0.15" stroke-width="1" transform="translate(1, 1)"></path><path fill="rgb(249, 249, 249)" fill-opacity=" .85" d="M 3 0 L 13 0 C 16 0 16 0 16 3 L 16 13 C 16 16 16 16 13 16 L 3 16 C 0 16 0 16 0 13 L 0 3 C 0 0 0 0 3 0"></path><text x="8"  style="font-size:12px;color:#333333;fill:#333333;" y="21"></text></g><text x="590" text-anchor="end"  style="cursor:pointer;color:#909090;font-size:9px;fill:#909090;" y="395">Highcharts.com</text></svg>

</div>
<section>
	<canvas id="svg-canvas"></canvas>
</section>

#15

I made a clean/usable bookmarklet out of the suggestions.

我从这些建议中得到了一个干净的、可用的书签。

It will put a unique link next to every inline <svg> on the page.

它将在页面上每个内联的

https://codepen.io/corysimmons/pen/vybzqV

https://codepen.io/corysimmons/pen/vybzqV

Hope it helps someone.

希望它能帮助一些人。

#16

No need to do any programming at all. There are online apps people have already built for that, and include definable parameters such as dimensions, resolution, output format etc.

不需要做任何编程。人们已经为其建立了在线应用程序，包括可定义的参数，如尺寸、分辨率、输出格式等。

This is one of the better online image conversion apps I've found for svg->jpeg.http://image.online-convert.com/convert-to-jpg

这是我在svg->jpeg.http://image.online convert.com/convert- jpg中找到的更好的在线图像转换应用程序之一。