How to use rough.js in node.js to save an svg file? #169

sieste · 2020-07-29T11:12:56Z

(Disclaimer: I also asked this on stackoverflow here)

The html code below is a minimal example to create an svg element displaying a simple rough.js polygon generated from an array of data. I want to use the js code in a nodejs program that generates the same svg and saves it to a file. What would be the simplest way of achieving this?

<html>
<head>
  <script src="https://unpkg.com/roughjs@latest/bundled/rough.js"></script>
</head>
<body>
  <script>
    var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    var rc = rough.svg(svg);
    var data = [[40, 20], [140, 30], [100, 130]];
    svg.appendChild(rc.polygon(data));
    document.body.appendChild(svg);
  </script>
</body>
</html>

sieste · 2020-07-29T12:40:07Z

(I figured it out, reposting my SO answer here in case it's of interest. I'm happy for this issue to be closed or deleted.)

The solution I found uses xmldom (from this github issue):

// file generate-rough-svg.js
const { DOMImplementation, XMLSerializer } = require('xmldom');
const xmlSerializer = new XMLSerializer();
const document = new DOMImplementation().createDocument('http://www.w3.org/1999/xhtml', 'html', null);
const rough = require('roughjs');
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const rc = rough.svg(svg);
var data = [[40, 20], [140, 30], [100, 130]]
svg.appendChild(rc.polygon(data))
let xml = xmlSerializer.serializeToString(svg);
console.log(xml)

Now I can run

node generate-rough-svg.js > image.svg

to generate the svg file.

StephanHoyer · 2020-12-09T09:49:51Z

My solution is a simple mock

const simpleDomMock = {
  ownerDocument: {
    createElementNS: (ns, tagName) => {
      const children = []
      const attrs = {}
      return {
        tagName,
        attrs,
        setAttribute: (key, value) => (attrs[key] = value),
        appendChild: node => children.push(node),
        children,
      }
    },
  },
}

Usage:

const rough = require('roughjs/bundled/rough.cjs.js').svg(domMock)
const rect = rough.rectangle(0, 0, 1, 1)

rect is now of the structure

{ tagName: 'g',
  attrs: {},
  setAttribute: [Function: setAttribute],
  appendChild: [Function: appendChild],
  children:
   [ { tagName: 'path',
       attrs: [Object],
       setAttribute: [Function: setAttribute],
       appendChild: [Function: appendChild],
       children: [] } ] }

So now you can use what every you want to serialize this to the desired format.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to use rough.js in node.js to save an svg file? #169

How to use rough.js in node.js to save an svg file? #169

sieste commented Jul 29, 2020

sieste commented Jul 29, 2020 •

edited

StephanHoyer commented Dec 9, 2020 •

edited

How to use rough.js in node.js to save an svg file? #169

How to use rough.js in node.js to save an svg file? #169

Comments

sieste commented Jul 29, 2020

sieste commented Jul 29, 2020 • edited

StephanHoyer commented Dec 9, 2020 • edited

sieste commented Jul 29, 2020 •

edited

StephanHoyer commented Dec 9, 2020 •

edited