Export to SVG or PNG

I have attached a background image, when I try exporting it to a PNG, the background is getting removed. I am using the makeImage() function of GoJS.

Also, the makeSvg() function is attaching the background image in the image tag, which when I am opening on another system, is not showing. I am not able to attach the sample SVG, but it is something like below.

image x=“0” y=“0” width=“842” height=“569” xlink:href=“file:///D:/Ab/Application/goJs/Demo/Sample_Floorplan.jpg” preserveAspectRatio=“xMidYMid slice” transform=“matrix(1, 0, 0, 1, 0, 0)”

How are you showing a background image on screen?

Clearly the generated SVG is referring to a local file on your machine. You need to serve that image at a URL that all of your users can reach.

But don’t you think that the background image should be combined with the elements on the top as that is why we are exporting it into a PNG/ SVG so as to access the flow diagram offline. Does GoJs have this functionality?

In that case you will need to customize the Diagram.makeSvg function by using its elementFinished option: https://gojs.net/latest/api/symbols/Diagram.html#makeSvg

I think you’ll want your elementFinished function, when the element was for a Picture, modifies the resulting SVG element by inserting the contents of the SVG file.

Thank you @Walter for your quick reply. Can you please explain me with an example? I am attaching a jpg in the go.Picture, what should I set in the setAttribute?

For image files you can render them to data: URIs by calling https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL. There are lots of examples of this on the web.

Yes, I tried this earlier. We face one issue here, it only print the things which are visible on the screen to the user. Whatever is there below when we scroll up, it does not show.

Could you please update your forum profile with correct information so that we can identify your support contract?

HI Walter,

We are currently at very early stage of the project and deciding on the library that we will be using with our proposed diagram editor.

Had a conversation with @Jason stewart from your team regarding exploring the capabilities for the GoJS library.

Could you please describe what you mean? How are you calling Diagram.makeSvg?

You can use elementFinished of makeSVG in order to edit every SVG <image> element so that the href refers to a Base64 encoded string instead of a URL. I think this is what you want.

https://codepen.io/simonsarris/pen/byJGqd?editors=1011