download SVG image that drawn on HTML5 automatically

Question

I am reading from file to draw multiple SVG images then save them in the computer at the same time. for simplification lets assume it is just one sag and I want to download it. I read many questions but I am having a problem with saving it.

function ExtractFileData(file) {
  var reader = new FileReader();
  reader.readAsText(file);
  reader.onload = function(event){
  var csv = event.target.result;
  var data = $.csv.toArrays(csv);
  var html = '';



for(var row in data) {

  for(var item in data[row]) {
  html += '<svg width="100" height="100">\r\n';
  switch (data[row][item])
  {

  case "circle":
  html += '<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"  download="expenses.svg" />\r\n ';
  break;

  } //end switch
  html += '</svg> \r\n'; 



  var svg = document.getElementsByTagName("svg")[0];
  // Extract the data as SVG text string
  var svg_xml = (new XMLSerializer).serializeToString(svg);

  // Submit the <FORM> to the server.
  // The result will be an attachment file to download.
  var form = document.getElementById("svgform");
  form['output_format'].value = "svg";
  form['data'].value = svg_xml ;
  form.submit();

  } //end for
  // html += '</svg> \r\n';
  html += '<br>';         
  html += '<br>';      
  html += '<br>';         
  html += '<br>';    

  }//end for

  $('#contents').html(html);

Then in the body part I create form so I can send my data to the server and download it in the system.. but nothing work ..

<form id="svgform" method="post" action="download.pl">
 <input type="hidden" id="output_format" name="output_format" value="">
 <input type="hidden" id="data" name="data" value="">
</form>

Here is the link for download.pl used in the hidden form: download.pl (download.pl this code not mine)

download SVG image that drawn on HTML5 automatically

0 Answers0