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.