A link in a SVG to save itself to a file

Question

I'm building a tool that generates an SVG chart. The tool is invoked via a browser (REST url). The generation is quite a time and resources consuming task and is actually stateless in a sense that it is not possible to issue the same request and get the same SVG.

I need a user to be able to save the snapshot (the SVG) via its browser. The best approach I could think of is to embed a DOWNLOAD_ME link in the image itself, that packs the displayed SVG and downloads it as a file.

However, I can't just make it work. What am I doing wrong? Is there a better/easier/more portable approach to achieve my goal here?

What's not working for me:

<svg contentScriptType="text/ecmascript" xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="magnify" version="1.0" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
<script type="text/ecmascript">
<![CDATA[
    function downloadAsFile() {
    var svg = document.getElementsByTagName('svg')[0];
    var serializer = new XMLSerializer();
    var source = serializer.serializeToString(svg);
    if(!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)){
      source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
    }
    if(!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)){
      source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
    }
    source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
    var url = "data:image/svg+xml;charset=utf-8,"+encodeURIComponent(source);
    var title = document.getElementById('title-text');
    title = title ? title.textContent : 'snapshot';
    var anchor = document.getElementById('generated-download-link');
    if (!anchor) { 
      anchor = document.createElement('a');
      anchor.id = 'generated-download-link';
      anchor.setAttribute('download', title + '.svg');
      anchor.setAttribute('href', url);
      // anchor.setAttribute('download', url);
      // anchor.setAttribute('href', '');
      svg.appendChild(anchor);
    }
    anchor.dispatchEvent(new Event('click'));
    console.log(anchor);
    // anchor.remove();
  }
  ]]>
</script>
<g id="test"> 
 <a download="myFile.svg" onclick="downloadAsFile()" href="#" ><text font-family="Verdana" font-size="16" x="10" y="20">Download me</text></a>
 </g>
</svg>

I get the Element logged just fine, it's just that don't see anything else happening apart from the logging.

And I am generating the link on-event, because the chart can be quite big in size (tens of megabytes), and I don't really want to bloat the payload size from the API.

EDIT: I forgot to add - it's an interactive SVG chart I'm building - a flamegraph. And it must remain interactive.

REFERENCES

Why would you add that functionality to a SVG element, SVGs are meant to display graphics, since you are using HTML and Javascript use that instead — Ricardo Sanchez, Oct 14 '20 at 10:54
@RicardoSanchez I have explained my reasoning in the first part of the question. I could add -- these snapshots will be needed later on for visual comparison (reports, etc.). And it is not possible to fetch the same chart twice in a row. It's a LIVE snapshot. And no, I am not using HTML per-se — netikras, Oct 14 '20 at 10:57
@ControlAltDel I'm using the latest chrome I could get and I don't have anything image-related by right-clicking on the SVG snippet I have pasted above — netikras, Oct 14 '20 at 10:58
@ControlAltDel you were right after all. I feel embarrassed now :) Thank you. — netikras, Oct 14 '20 at 11:25
I just learned something new today, after looking at the [Mozilla documentation](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/script) I think the call on the `` tag is outside the scope of the script — Ricardo Sanchez, Oct 14 '20 at 11:27
@RicardoSanchez what do you mean by the "call on the `` tag"? you mean the `anchor.dispatchEvent(new Event('click'))` part? Interestingly, the hardcoded `` does have a `click` listener assigned. But the one I am creating in-javascript has no listeners at all. https://imgur.com/BfRAXMs — netikras, Oct 14 '20 at 11:52

score 0 · Answer 1 · answered Oct 14 '20 at 11:24

@ControlAltDel was right. There in fact is a [Save As] item in the context menu. Silly me - since I was dealing with links I assumed that menu item saves contents of the link as a file.

Still, it would be nice to know why my javascript approach didn't work.

A link in a SVG to save itself to a file

1 Answers1