Converting d3.js SVG code to a standalone program — Example?

Question

Either with a headless browser, google filesytem API, or some other way.

This question says you can, but not how. Converting d3.js SVG code to a standalone program -- any suggestions? google groups has more hints, but no examples.

I've spent a bunch of time playing with the node-canvas example, as well as the phantomJS svg example. I can't figure out how to make them play together. Apparently in Linux, the x-windows Javascript rendering engine isn't very good anyway.

My API reading list of JavaScript, d3.js, SVG, CSS, and other HTML stuff is already mountainous - all I want to do is save a .svg image that I generate with d3.js.

Help, please.

Answer 1

There are some examples of using node().parentNode.innerHTML with 64B encoding, but I couldn't figure out how to use it. https://groups.google.com/forum/?fromgroups#!topic/d3-js/aQSWnEDFxIc

The easiest solution I've found so far is FileSaver.js demo here: http://eligrey.com/demos/FileSaver.js/

It uses the HTML5 filesaver interface.

Answer 2

This will neither be easy nor overtly complicated. Main reason being is that a web browser alone cannot save an SVG file from a DOM rendering, unless it's Chrome version 12.

Thing is that an SVG image is just a plain text file with a bunch of rendering instructions. The solution you point to basically says you would have to do this server side. Though they suggest node.js, you can do this in any server-side language you'd like.

Trick is to take your JavaScript/HTML interface, make it either keep track of all objects you create, or otherwise be able to serialize all of them, and then send that data (ex: via ajax) to a server-side program which would reconstitute that to an SVG file and offer it to be downloaded.

The challenge is that both your programs (client-side, javascript and server-side: php/etc.) will more or less have to re-implement SVG specifications to make this work and have common understanding as to how you serialized it for the transmission. There are virtually no stock components that do this for you.

Answer 3

I came across this today, I've not tried it but perhaps someone will find it useful:

https://github.com/d3-node/d3-node

 const D3Node = require('d3-node')
 const d3n = new D3Node()      // initializes D3 with container element
 d3n.createSVG(10,20).append('g') // create SVG w/ 'g' tag and width/height
 d3n.svgString() // output: <svg width=10 height=20 xmlns="http://www.w3.org/2000/svg"><g></g></svg>