How can i save as SVG

I see that button “save as SVG”, but can’t find anywhere in the github repo/examples how can i add this functionality?

1 Like


If your question is to how to export an SVG, you can simply do in the Camunda Modeler:

File > Export As Image

Then chose SVG as format.

If you want to know how SVG export is being handled programatically you can have a look at Viewer class, saveSVG function.

I’m asking about this icon and functionality image

how can i add this icon and functionality to my implementation? Where should i add Viewer.saveSVG?

When you do your own BpmnJS implementation based on the example here:

var viewer = new BpmnJS({
  container: 'body'

You can hook into saveSVG.done event to get the SVG after calling viewer.saveSVG.

Please read the comments above the method I sent you in my first answer.

Simply call saveSVG on clicking the button.

Hi Ratel, You can use this code for export and download diagram as svg

modeler.saveSVG({ format: true }, function (error, svg) {
    if (error) {

    var svgBlob = new Blob([svg], {
        type: 'image/svg+xml'

    var fileName = Math.random(36).toString().substring(7) + '.svg';

    var downloadLink = document.createElement('a'); = fileName;
    downloadLink.innerHTML = 'Get BPMN SVG';
    downloadLink.href = window.URL.createObjectURL(svgBlob);
    downloadLink.onclick = function (event) {
    }; = 'hidden';

Good luck.


Thanks for all your responses.

in my project React + Hooks API. Have to use refs, to get the element i need. And only then i use this method to save the current bpmn-model on canvas Save as SVG - Unescaped double quote

thank you for your code snippet. That’s will help many people)

1 Like