SVG, PNG and JPG export

There are a couple of ways to generate output from JsPlumb. If you are using a shape library to render the nodes in your UI as SVG elements, you can export your Surface to SVG, PNG or JPG using the SVGExporter or ImageExporter. If your nodes are rendered as HTML you can use html2canvas to

Exporting via ShapeLibrary

There are two approaches - use JsPlumb's export helper UI, or use the low level programmatic API.

Export helper UI

The export helper UI provides a simple interface to allow your users to export the contents of a surface to an SVG file. to invoke the SVG export UI for the surface shown below.

SVG Export

The code to invoke the SVG exporter UI is:

Vanilla JS

React

Angular

Vue

Svelte

import { SVGExporterUI, newInstance } from "@jsplumbtoolkit/browser-ui"

const toolkit = newInstance();
const surface = toolkit.render(someDOMElement, {...})

new SVGExporterUI(surface).export()    // create an exporter and invoke the `export` method on it

You can using this code:

Vanilla JS

React

Angular

Vue

Svelte

import { ImageExporterUI, newInstance } from "@jsplumbtoolkit/browser-ui"

const toolkit = newInstance();
const surface = toolkit.render(someDOMElement, {...})

new ImageExporterUI(surface).export()    // create an exporter and invoke the `export` method on it

And you can using this code:

Vanilla JS

React

Angular

Vue

Svelte

import { ImageExporterUI, newInstance } from "@jsplumbtoolkit/browser-ui"

const toolkit = newInstance();
const surface = toolkit.render(someDOMElement, {...})

new ImageExporterUI(surface).export({type:"image/jpeg"})    // create an exporter and invoke the `export` method on it

CSS classes

Setting PNG/JPG export size

When exporting a PNG or JPG you can provide a desired width or height for the exported image (this example shows PNG; see the code above for how to specify JPG):

Vanilla JS

React

Angular

Vue

Svelte

import { ImageExporterUI, newInstance } from "@jsplumbtoolkit/browser-ui"

const toolkit = newInstance();
const surface = toolkit.render(someDOMElement, {...})

new ImageExporterUI(surface).export({width:3000})    // create an exporter and invoke the `export` method on it

Export PNGExport JPG

If you click an export link above you'll get an image with width 3000 pixels. You can also specify height instead of width if you prefer, but if you specify height and width we'll only use the width you provide - the exporter always maintains the aspect ratio of the original image.

Specifying a set of exportable dimensions

If you'd like your users to be able to pick the dimensions of their exported image you can also do that:

import { ImageExporterUI } from "@jsplumbtoolkit/browser-ui"

new ImageExporterUI(someSurface).export({
    dimensions:[
        { width:3000 },
        { width:1200 },
        { width:800 }
    ]
})

The entries in dimensions can have either width or height, but if you supply both we will, as discussed above, only honour the width. When you click an export link in the next code demo, you'll see a dropdown from which you can pick the size of the export:

Export PNGExport JPG

---

Programmatic export

The various methods shown above are wrappers around a lower level API that you can use instead if you wish to.

SVG export

Vanilla JS

React

Angular

Vue

Svelte

import { SVGExporter, newInstance } from "@jsplumbtoolkit/browser-ui"

const toolkit = newInstance();
const surface = toolkit.render(someDOMElement, {...})

const exporter = new SVGExporter(surface)
const result = exporter.export({ options })

options is of type SVGExportOptions:

Interface SvgExportOptions

Name	Type	Description
defaultSize?	Size	Default size to use for nodes if their data does not have width/height properties.
fill?	string	Default fill color to use for vertices. Will be overridden by individual fill values in each node. Default value is white.
gridPaddingCells?	number	Optional, defaults to 1. If a grid is being included in the output JsPlumb will draw this number of blank grid cells around the content. You can set this to 0, but we wouldn't recommend setting it to a negative number!
labelAttribute?	string	If showing labels, the name of the property in each node that defines the label. Defaults to label.
labelColor?	string	If showing labels, the default color to use. Will be overridden by individual textColor values in each node. Default value is black.
labelStrokeWidth?	string	If showing labels, the stroke width to use when rendering them. Defaults to 0.25px.
margins?	PointXY	Optional whitespace to place around the export. Defaults to 50px in x and y.
outline?	string	Default outline color to use for vertices. Will be overridden by individual outline values in each node. Default value is black.
path?	Path	Optional path to render. If null, and selection is null, the whole dataset is exported.
selection?	Selection	Optional selection to render. If null, and path is null, the whole dataset is exported.
showGrid?	boolean	Optional, defaults to true. When a generated grid background is in use in the Surface whose contents are being exported, by default the exported SVG (or PNG/JPG) will include the grid. This flag allows you to hide the grid if you wish.
showLabels?	boolean	Whether or not to display labels (using an SVG text element) on nodes. Defaults to false.
strokeWidth?	number	Default stroke width to use for nodes. Will be overridden by individual outlineWidth values in each node. Default value is 2.
style?		Optional style to set in a style element in the SVG header. You can provide the CSS for the style element as a string, or you can provide a JS object.

Image export

To export an image programmatically you have to provide options for the export, as well as a function for the Toolkit to invoke once the image is ready:

import { ImageExporter } from "@jsplumbtoolkit/browser-ui"

const exporter = new ImageExporter(surface)
const result = exporter.export({ options }, onready:(r:ImageReadyFunction) => {
    
})

options is of type ImageExportOptions:

Interface ImageExportOptions

Name	Type	Description
defaultSize?	Size	Default size to use for nodes if their data does not have width/height properties.
fill?	string	Default fill color to use for vertices. Will be overridden by individual fill values in each node. Default value is white.
gridPaddingCells?	number	Optional, defaults to 1. If a grid is being included in the output JsPlumb will draw this number of blank grid cells around the content. You can set this to 0, but we wouldn't recommend setting it to a negative number!
height?	number	Optional height for the export. The exported image's aspect ratio will always be honoured so if you provide both this and width, this will be ignored. If you don't provide this the natural height of the underlying SVG will be used.
labelAttribute?	string	If showing labels, the name of the property in each node that defines the label. Defaults to label.
labelColor?	string	If showing labels, the default color to use. Will be overridden by individual textColor values in each node. Default value is black.
labelStrokeWidth?	string	If showing labels, the stroke width to use when rendering them. Defaults to 0.25px.
margins?	PointXY	Optional whitespace to place around the export. Defaults to 50px in x and y.
outline?	string	Default outline color to use for vertices. Will be overridden by individual outline values in each node. Default value is black.
path?	Path	Optional path to render. If null, and selection is null, the whole dataset is exported.
quality?	number	Optional quality of the resulting image - only used for jpeg. Defaults to 1.0.
selection?	Selection	Optional selection to render. If null, and path is null, the whole dataset is exported.
showGrid?	boolean	Optional, defaults to true. When a generated grid background is in use in the Surface whose contents are being exported, by default the exported SVG (or PNG/JPG) will include the grid. This flag allows you to hide the grid if you wish.
showLabels?	boolean	Whether or not to display labels (using an SVG text element) on nodes. Defaults to false.
strokeWidth?	number	Default stroke width to use for nodes. Will be overridden by individual outlineWidth values in each node. Default value is 2.
style?		Optional style to set in a style element in the SVG header. You can provide the CSS for the style element as a string, or you can provide a JS object.
type?	string	Content type for the export. Defaults to image/png. Most modern browsers also support image/jpeg.
width?	number	Optional width for the export. The exported image's aspect ratio will always be honoured so if you provide both this and height, height will be ignored. If you don't provide this the natural width of the underlying SVG will be used.

Vanilla JS

React

Angular

Vue

Svelte

import { ImageExporter, newInstance } from "@jsplumbtoolkit/browser-ui"

const toolkit = newInstance();
const surface = toolkit.render(someDOMElement, {...})

const exporter = new ImageExporter(surface)
const result = exporter.export({ options }, onready:(r:ImageReadyFunction) => {
    
})

ImageReadyFunction

This function has the type:

type ImageReadyFunction = (params:{width:number, height:number, url:string, el:SVGElement, contentType:string}) => any

• height Computed height for the image, in pixels.
• width Computed width for the image, in pixels.
• url A data url for the image, encoded as base 64.
• el The underlying SVG element that was exported to the image
• contentType eg image/png, image/jpeg.

Exporting a Selection or Path

You can export a Selection or Path to SVG/PNG/JPG. For example here we create a Selection and add nodes "1", "2" and "5" to it, and then export that selection only:

import { SVGExporter } from "@jsplumbtoolkit/browser-ui"

const selection = new Selection(toolkit)
selection.append(["1", "2", "5"])
const exporter = new SVGExporter(surface)
const result = exporter.export({ selection })

Vanilla JS

React

Angular

Vue

Svelte

import { SVGExporter, newInstance } from "@jsplumbtoolkit/browser-ui"

const toolkit = newInstance();
const surface = toolkit.render(someDOMElement, {...})

const selection = new Selection(toolkit)
selection.append(["1", "2", "5"])
const exporter = new SVGExporter(surface)
const result = exporter.export({ selection })

You can supply a selection to all of the UI exporter methods discussed above.

Exporting the current selection

You can export the current selection for some JsPlumb Toolkit instance to SVG/PNG/JPG. This can be very handy in conjunction with the lasso tool, for example - your users can snag a few nodes and print just those out.

Vanilla JS

React

Angular

Vue

Svelte

import { SVGExporter, newInstance } from "@jsplumbtoolkit/browser-ui"

const toolkit = newInstance();
const surface = toolkit.render(someDOMElement, {...})

const exporter = new SVGExporter(surface)
const result = exporter.exportCurrentSelection()