javascriptsvgsnap.svg

How can I save my generated svg code to a .svg file in the client machine?


I used snap.svg library to generate, with javascript, a svg element in my asp.net web form page by loading other external .svg files and manipulating them in order to get the final svg element. Once the composition of the desired svg object is finish and the resulting svg element shows fine in my page, I need to save it as an .svg file in the client machine, in a user selected path. Any idea about how to do it directly? I mean, whithout sending the code to the server, generate the file in the server, and then download the file to the client machine.


Solution

  • You can do this in two simple steps:

    1. Use new XMLSerializer().serializeToString(svg); to get a String from your SVG
    2. Use FileSaver.js to actually save the file (https://github.com/koffsyrup/FileSaver.js)

    This should work in most cases (except Safari, of course).