Menu
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?
SVG is a total new field for me so please be patient if my wording is not accurate.
222
You can use the Save As feature to save to the SVG format directly. Choose File > Save As from the Menu Bar. You can create a file and then choose File > Save As to save the file. In the save window, change the Format to SVG (svg) and then click Save.
Once you're on a web page, click the extension's icon next to the URL bar and a new tab will open showing you all the SVG files it found on the page. You can copy an SVG file to your clipboard, download only the few you need, or click the 'Download all SVGs' button to add them all to a zipped file and download them.
To draw SVG onto canvas, you need to use SVG image. Firstly, use the <foreignObject> element which contains the HTML. After that, you need to draw the SVG image into the canvas.
You can avoid a round trip to the server.
Base64 encode your 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
189
Using FileSaver.js
saveAs(new Blob([SVG_DATA_HERE], {type:"image/svg+xml"}), "name.svg") If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
