Instructions to use API to generate and save an SVG file

[DylanMuir]

Hi

Thanks for providing this code! I would like to use the library to generate figures for a custom network, for which I'm using the API directly, locally. I can produce a figure in an HTML file, but I can't find any docs about how to use the API to generate an SVG file from the figure.

Could you please provide a minimal example that generates and saves an AlexNet figure as SVG?

Thanks Dylan.

[alexlenail]

Hi @DylanMuir,

Supposing you have used the API to generate your figure, the SVG for your figure will be in d3.select("#graph-container").html().

Since I didn't forsee your use case, I do a little trick involving changing the href attribute on the download button to btoa(unescape(encodeURIComponent(d3.select("#graph-container").html()))) at the time you click it.

You, on the other hand, will want to use the more formal https://github.com/eligrey/FileSaver.js/, e.g.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>  

which I'm guessing will ultimately look sort of like:

nnsvg = d3.select("#graph-container").html()
saveAs(new Blob([nnsvg], { type: "text/plain;charset=utf-8" }), 'nn.svg');

Let me know how it goes...

[DylanMuir]

Hi @alexlenail, thanks for your feedback!

I'm using the AlexNet API, so D3 is not used — how would I then gain access to the blob? I tried the code above but got an empty SVG.

[alexlenail]

Hi @DylanMuir,

I believe d3.select("#graph-container").html() just grabs the html. So you should be able to substitute in jquery or just classic javascript document.getElementById('graph-container')...