SVG

JointJS+ provides an SVG plugin that enables the ability to export the Paper as SVG.

Installation

Access SVG methods via the format namespace, and pass an instance of dia.Paper and a callback where applicable to the method.

import { dia, format } from '@joint/plus';

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

There is also a UMD version available

Include joint.format.svg.js in your HTML:

index.html

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

Access SVG methods through the joint.format namespace:

index.js

joint.format.toSVG(paper, function(svgString, error) {
    sendToServer(svgString);
    offerForDownload(svgString);
});

Frequently asked questions

How to export a diagram as a standalone SVG?

You may activate several options of the toSVG() function to save additional information to the SVG export of your JointJS diagram, depending on your exact use case.

Learn more...

• convertImagesToDataUris includes all contained images into your export - see below.

• useComputedStyles calculates all styles that are applied on your diagram at the time of export and includes them in the exported SVG.

• preserveDimensions explicitly specifies the current width and height of the content as the dimensions of the exported SVG.

• grid includes the Paper grid in the exported SVG.

How to keep images when opening exported SVG locally?

When exporting your diagram, you may instruct JointJS to keep all contained images by specifying the convertImagesToDataUris option as true.

Learn more...

For example:

format.toSVG(
    paper,
    (svg) => {
        util.downloadDataUri(
            `data:image/svg+xml,${encodeURIComponent(svg)}`,
            'joint-plus.svg'
        );
    },
    { convertImagesToDataUris: true }
);