SVG

Exports the Paper as SVG. Learn more about the SVG plugin.

Functions

toSVG()

toSVG(
    paper: dia.Paper,
    callback: (svg: string, error?: Error) => void,
    opt?: SVGExportOptions
): void;

Converts the content of the paper to an SVG string, and calls a callback with the SVG string as the first parameter. The second parameter of the callback is an optional error in case something happened during processing.

openAsSVG()

openAsSVG(paper: dia.Paper, opt?: SVGExportOptions): void;

Opens a new window with SVG representing the content of the paper.

Configuration

The toSVG(paper, callback[, opt]) method takes an options object opt with the following properties:

preserveDimensions

By default, the resulting SVG document has a set width and height of 100%. If you'd like to have the dimensions set to the actual content width and height, set preserveDimensions to true. An object with width and height properties can also be used here if you need to define the export size explicitly.

area

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 local coordinates. It defaults to the paper content bounding box - paper.getContentBBox() transformed into local coordinates.

// Export selected elements only and add a padding
const padding = 20;
toSVG(paper, callback, {
    area: graph.getCellsBBox(selection.collection.toArray()).inflate(padding)
});

convertImagesToDataUris

Converts all contained images into Data URI format. It defaults to false.

useComputedStyles

Controls how styles from external stylesheets are copied to the resulting SVG export. It accepts a boolean, one of the string strategies 'minimal' / 'full', or an object for property filtering. It defaults to true.

type UseComputedStylesOption =
    | boolean    // `true` ≡ `'minimal'`, `false` ≡ no styles copied
    | 'minimal'  // copy only the styles that differ from the disabled-stylesheets defaults
    | 'full'     // copy every computed property verbatim
    | { includeProperties?: string[]; excludeProperties?: string[] }; // `'full'` + filtering

/* External stylesheet.css */
.joint-link .connection { fill: none }
.joint-element rect { stroke: red }

true / 'minimal'

Copies only the styles that differ from the browser defaults computed with stylesheets disabled. This keeps the inline style="" small, but requires a lot of computations and might significantly affect the export time.

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(paper, callback, { useComputedStyles: false });

'full'

Copies every computed property verbatim. It is single-pass, fast and robust, at the cost of a larger style="" per element. The 'full' strategy also captures ::before / ::after pseudo-elements, which 'minimal' drops - this is required for glyph-via-pseudo icon libraries (Font Awesome, Material Icons) to survive the export.

paper.toSVG(paper, callback, { useComputedStyles: 'full' });

Object form

Turns on 'full' with property filtering. includeProperties is an allowlist; when present, only the listed properties are copied. excludeProperties is a blocklist applied afterwards, so the final set is include ∖ exclude. Property names are CSS property names as reported by getComputedStyle() (e.g. 'fill', 'font-size').

// Copy every computed property except `font-family`
paper.toSVG(paper, callback, {
    useComputedStyles: { excludeProperties: ['font-family'] }
});

embedFonts

When set to true, @font-face rules whose family is used by the exported subtree (including by pseudo-elements) are inlined into the export. Each url(...) is fetched and rewritten as a data: URI, so the fonts render even when the SVG is opened without the page's stylesheets. Cross-origin stylesheets are re-fetched so fonts served from CDNs (e.g. Font Awesome via cdnjs) work out of the box. It defaults to false.

Per-URL fetch failures are reported via console.warn and the failing URL is dropped; embedFonts never rejects the export. Pair it with useComputedStyles: 'full' to capture icon-font glyphs.

paper.toSVG(paper, callback, {
    useComputedStyles: 'full',
    embedFonts: true
});

stylesheet

A stylesheet(as a 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

type BeforeSerialize = (doc: SVGSVGElement, paper: dia.Paper) => void | SVGElement;

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.

toSVG(paper, callback, {
    beforeSerialize: function(doc) {
        // remove all links from the exported XML
        Array.from(doc.querySelectorAll('.joint-link')).forEach(function(node) {
            node.parentNode.removeChild(node);
        });
    }
});

fillFormControls

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

When set to true, the grid is rendered in the export. It defaults to false.

Types

SVGExportOptions

interface SVGExportOptions {
    preserveDimensions?: boolean;
    area?: dia.BBox;
    convertImagesToDataUris?: boolean;
    useComputedStyles?: UseComputedStylesOption;
    stylesheet?: string;
    grid?: boolean;
    beforeSerialize?: BeforeSerialize;
    fillFormControls?: boolean;
    embedFonts?: boolean;
}

UseComputedStylesOption

type UseComputedStylesOption =
    | boolean
    | 'minimal'
    | 'full'
    | ComputedStylesCopyOptions;

See useComputedStyles.

ComputedStylesCopyOptions

interface ComputedStylesCopyOptions {
    // Allowlist of CSS property names. When present, only listed properties are copied.
    includeProperties?: string[];
    // Blocklist of CSS property names. Applied after `includeProperties`, so `include ∖ exclude` is the final set.
    excludeProperties?: string[];
}