JointJS+ SVG


This plugin adds two new methods to the joint.format namespace:

  • toSVG(paper, callback[, opt]) - Converts the content of the paper to an SVG string and calls the callback with the SVG string as the first parameter. The second parameter of the callback is an optional error in the case something happened during the processing.
  • openAsSVG(paper) - Opens a new window with SVG representing the content of the paper.


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

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


joint.format.toSVG(paper, function(svgString, error) {


The toSVG(paper, callback[, opt]) method takes a target paper and 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 explicitly.
area g.Rect An area which should be displayed in the resulting raster image. The value is an object with x, y, width and height properties, describing the origin and 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;
joint.format.toSVG(paper, 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' });
format.paper.toSVG(paper, 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 }'

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.

format.toSVG(paper, callback, {
  beforeSerialize: function(doc) {
    // remove all links from the exported XML
    Array.from(doc.querySelectorAll('.joint-link')).forEach(function(node) {
fillFormControls boolean Fill in the values of all form controls (input, select, textarea) so that they are displayed in the export (form controls can be part of the export if they are inserted via foreignObject). It defaults to true.
grid boolean When set to true, the grid is rendered in the export. It defaults to false.