svg-pizzabase

Script to help create SVG visualisations from JavaScript code; headlessly and server-side. Like a ready-made pizza-base: add toppings and bake.

npm i -g svg-pizzabase

How

Pass client JavaScript on stdin. In that script, append stuff to the svg#vis element present on the page.

When that script finishes running, the SVG element is extracted, the proper doctype stuff added, and the finished SVG is printed on stdout.

For example:

vis.js:

var vis = document.getElementById('vis')
var rect = vis.appendChild(document.createElement('rect'))
rect.setAttribute('width', 50)
rect.setAttribute('height', 50)

Run in a terminal:

svg-pizzabase < vis.js > output.svg

output.svg:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="vis"><rect width="50" height="50"></rect></svg>

If you need the SVG element to be a particular size, just change select it and change its width and height attributes it in your code.

Works brilliantly with browserify (or webpack, or another bundler) to get D3 (or whatever other JS library you want to use) into the same file for writing to stdin.

Why

I often draw stuff to clarify my Game Development SE answers. Sometimes it's convenient to draw with D3 code. This eases that. Give it code and it will give you a picture.

Bonus tip: PNG conversion

To convert an SVG into a PNG image, I recommend Inkscape's command line:

inkscape picture.svg --export-png=picture.png --export-area-drawing

I tried ImageMagick's command line, but it tends to crop stuff all funky and renders text badly. YMMV.