Fwd: How to export as SVG/ PNG

[Sami Nizam]

Hi David,

We have done alot in jointjs, and we have checked your rappid modular diagram builder, it is awesome.

We have added class diagrams, Usecase diagram ,ERD and Org charts to draw as text to draw. and it works fine. But we need to export diagrams generated on paper as SVG or PNG.

Can you help me, how to export the diagrams ?

Thanks

[dave]

Hi Sami,

SVG/PNG export is implemented as a Rappid plugin. I cannot post the code for these plugins but I can give you a hint on how it's done.

Export to SVG: This might sound simple as JointJS uses SVG to render graphics. A naive implementation would just take the paper.svg (which points to the SVG document) and serialize it to SVG string:

var svgDoc = paper.svg;

var serializer = new XMLSerializer();

var svgString = serializer.serializeToString(svgDoc);

This has one important issue though. Elements in the SVG document can be styled in CSS (and many of them actually are). The way we deal with this in our plugin is as follows:

1. Disable all the stylesheets in the page and therefore collect only default style values.

   This, together with the step 2, makes it possible to discard browser default CSS property values

   and store only those that differ.

2. Enable back all the stylesheets in the page and collect styles that differ from the default values.

3. Apply the difference between default values and the ones set by custom stylesheets

    onto the `style` attribute of each of the nodes in SVG.

This way, we create a clone of the paper SVG document that contains all the styles from external stylesheets inside the style attribute of all the relevant nodes.

Export to PNG: Once you have export to SVG, you can use e.g. the canvg library (https://code.google.com/p/canvg/) for export to PNG or JPEG.

[dave]

One more tip. If you don't mind rendering to SVG/PNG on the server side, you can simple send the graph as JSON to the server and reconstruct it there using the headless PhantomJS browser, then you can simply render the page to PNG/JPG/GIF or PDF using the render() method: https://github.com/ariya/phantomjs/wiki/API-Reference-WebPage#wiki-webpage-render.

[Rgt]

Hi

What happen if i am using HTML in JointJS elements, is it possible to export the image in that way?

Thanks for the help!!

[Mahadev Padwal]

Hi dave 

Can we render exported and saved svg to paper so that we can edit it. 

Or we can just draw and export the diagrams in jointjs?

Thanks.