Client side saving of files

[bramp]

http://updates.html5rocks.com/2011/08/Saving-generated-files-on-the-client-side

[sbnb]

Looks like my request fits here. I love the sequence diagrams, but so far have been using it on your demo site, and saving the files via 'download as svg' button. Today I set it up locally from the 'usage' instructions, and can get diagrams to render ok, but can't figure how to save them as SVG images. No big deal, as I can just copy the text onto your site for that, but would be nice if you get around to it.

Great work, thanks!

[bramp]

Hey,

The site is using https://github.com/phaistonian/SVGInnerHTML to allow it to export the SVG. The code I use on the site looks like:

        download_link.click(function(ev) {
          var svg = diagram_div.find('svg')[0];
          var width = parseInt(svg.width.baseVal.value);
          var height = parseInt(svg.height.baseVal.value);
          var data = editor.getValue();
          var xml = '<?xml version="1.0" encoding="utf-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"><svg xmlns="http://www.w3.org/2000/svg" width="' + width + '" height="' + height + '" xmlns:xlink="http://www.w3.org/1999/xlink"><source><![CDATA[' + data + ']]></source>' + svg.innerHTML + '</svg>';

          var a = $(this);
          a.attr("download", "diagram.svg"); // TODO I could put title here
          a.attr("href", "data:image/svg+xml," + encodeURIComponent(xml));
        });

[sbnb]

Cheers, that works.

[erikdahlstrom]

I'd recommend that you don't put that <source> element directly into the svg output. I think wrapping it in a <desc> or <metadata> would be better (see https://svgwg.org/svg2-draft/struct.html#UnknownElement for why).