How can i save as SVG

Users
1

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
2

Hey,

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.

3

I’m asking about this icon and functionality image
https://demo.bpmn.io/new

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

4

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.

5

Simply call saveSVG on clicking the button.

6

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

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

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

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

    var downloadLink = document.createElement('a');
    downloadLink.download = fileName;
    downloadLink.innerHTML = 'Get BPMN SVG';
    downloadLink.href = window.URL.createObjectURL(svgBlob);
    downloadLink.onclick = function (event) {
        document.body.removeChild(event.target);
    };
    downloadLink.style.visibility = 'hidden';
    document.body.appendChild(downloadLink);
    downloadLink.click();                                        
});

Good luck.

3 Likes
7

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

8

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

1 Like