JointJS+ SVG

format.SVG

This plugins adds two new methods to the joint.dia.Paper object:

toSVG(callback[, opt]) - Converts the content of the paper to an SVG string and calls the callback with the SVG string as the first parameter.
openAsSVG() - Opens a new window with SVG representing the content of the paper.

Installation

Include joint.format.svg.js file into your HTML:

<script src="joint.format.svg.js"></script>

Usage

paper.toSVG(function(svgString) {
    sendToServer(svgString);
    offerForDownload(svgString);
});

Configuration

The toSVG(callback[, opt]) method takes an option object opt with the following parameters:

preserveDimensions	boolean \| object	By default, the resulting SVG document has set width and height to 100%. If you'd like to have the dimensions to be set to the actual content width and height, set `preserveDimensions` to `true`. An object with `width` and `height` properties can be also used here if you need to define the export size explicitely.
area	g.Rect	An area, that the resulting SVG should display. The value is an object, which contains `x`,`y`,`width` and `height`, describing the origin and the size of a rectangular area on the paper in the local coordinates. It defaults to the paper content bounding box - `paper.getContentBBox()` transformed into the local coordinates. `// Export selected elements only and add a padding var padding = 20; paper.toSVG(callback, { area: graph.getCellsBBox(selection.collection.toArray()).inflate(padding) });`
convertImagesToDataUris	boolean	Converts all contained images into Data URI format. It defaults to `false`.
useComputedStyles	boolean	When set to `true` all the styles from external stylesheets are copied to the resulting SVG export. Note this requires a lot of computations and it might significantly affect the export time. `// External stylesheet.css .joint-link .connection { fill: none } .joint-element rect { stroke: red }` When set to `false` no styles from external stylesheets are copied to the resulting SVG export. Using this option requires you to make sure all the elements and links styling is inlined. `// Store SVG Attributes right on the DOM elements link.attr('.connection', { fill: 'none' }); element.attr('rect', { stroke: 'red' }); paper.toSVG(callback, { useComputedStyles: false });`
stylesheet	string	A stylesheet (as string) can be provided and appended to the resulting SVG export. `paper.toSVG(callback, { stylesheet: [ '.joint-link .connection { fill: none }', '.joint-element rect { stroke: red }' ].join('') });` It defaults to `true`.
beforeSerialize(SVGDocument, paper)	function	A function called before the XML serialization. It may be used to modify the exported SVG before it is converted to a string. The function can also return a new SVGDocument. `paper.toSVG(callback, { beforeSerialize: function(doc) { // remove all links from the exported XML Array.from(doc.querySelectorAll('.joint-link')).forEach(function(node) { node.parentNode.removeChild(node); }); }`