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.

• embedFonts inlines the @font-face fonts used by your diagram - see below.

• 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 }
);

How to keep fonts and icon fonts when opening exported SVG locally?

When exporting your diagram, you may instruct JointJS to inline the fonts your diagram uses by specifying the embedFonts option as true. This embeds each @font-face font as a data: URI, so text renders with the original font even when the SVG is opened without the page's stylesheets.

Learn more...

Icon-font libraries such as Font Awesome and Material Icons render their glyphs through ::before / ::after pseudo-elements, which are dropped by the default export. To keep them, combine embedFonts with the useComputedStyles: 'full' strategy, which captures pseudo-elements:

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