13

I am new to SVG and not an advanced user of JavaScript. I have a webpage with svg content dynamically rendered by javascript. In Internet Explorer when I right click on the svg content, I get option "Save Picture As" and I am able to save the content as png or svg.

How do I programatically do it by having a button and allow user to save the content in png on to their machine.

LarsTech
  • 80,625
  • 14
  • 153
  • 225
Chandan
  • 155
  • 1
  • 7
  • 1
    That should not be possible to do because of the browser security. Just think of the danger posed if you could write data to the user's machine without their consent using JavaScript. – Ranhiru Jude Cooray Dec 05 '11 at 01:17
  • There is a similar question. See this link http://stackoverflow.com/questions/2483919/how-to-save-svg-canvas-to-local-filesystem – Luo Dec 05 '11 at 02:10
  • A similar question is asked before. See this one http://stackoverflow.com/questions/2483919/how-to-save-svg-canvas-to-local-filesystem – Luo Dec 05 '11 at 02:10
  • Thanks for your response Ranhiru Cooray, but I am not writing the data without user's consent. The button click will open a dialog box to allow user as where they want to save the file. Exactly the way IE does when you click on "Save Picture As." – Chandan Dec 05 '11 at 02:26
  • lya, I appreciate your response. I already went through the link stackoverflow.com/questions/2483919/… but it just does the same thing, like right click on the link and then do "save as." – Chandan Dec 05 '11 at 02:31

1 Answers1

10

From my research there is no way to do this without sending the svg content to your server and having it return the data to save as a file download.

However, even this is tricky to achieve with a single AJAX-style request and the solution is amazingly convoluted. Others have linked to other posts that explain this, but I already went through the same answers and none of them explain it very well.

Here are the steps that worked for me:

  1. Use JavaScript to serialize the SVG content.

    var svgString = new XMLSerializer().serializeToString(svgElement);

  2. Create a hidden iframe whose src is the submit url. Give it an id.
  3. Create a hidden input. Set the value of this input to the serialized SVG content.
  4. Create a form whose target is the id given to the iframe, and whose action is the submit url. Put the input inside the form.
  5. Submit the form.

  6. On your server, use whatever tools are available (I don't use .NET so you're on your own here...) to convert the SVG document to a PNG. Send the PNG content back to the client, making sure to use the headers:

    Content-Type:image/png

    Content-Disposition:attachment; filename=mypng.png

The browser should initiate a file download on the returned content, although this is browser-dependent and I'm not certain but some browsers may choose to open images in a new tab instead of opening a file download dialog.

Here is an (imperfect) function that will do the AJAX work (uses JQuery but you should get the idea). data is the serialized SVG:

function ajaxFileDownload(url, data) {
    var iframeId = "uniqueIFrameId";     // Change this to fit your code
    var iframe = $("#" + iframeId); 

    // Remove old iframe if there
    if(iframe) { 
        iframe.remove(); 
    }

    // Create new iframe 
    iframe = $('<iframe src=""' + url + '"" name="' + iframeId + '" id="' + iframeId + '"></iframe>')
        .appendTo(document.body)
        .hide(); 

    // Create input
    var input = '<input type="hidden" name="data" value="' + encodeURIComponent(data) + '" />'; 

    // Create form to send request 
    $('<form action="' + url + '" method="' + 'POST' + '" target="' + iframeId + '">' + input + '</form>')
        .appendTo(document.body)
        .submit()
        .remove();
}

Note that this URL-encodes the SVG content, so you will have to decode it on your server before converting to PNG.

Also note that if you have defined styles for your SVG in an external stylesheet, they will not be serialized. I decided to put all styles inline on the elements as presentation attributes for this reason.

I hope this helps.

Tony R
  • 11,224
  • 23
  • 76
  • 101