Convert from SVG to pdf or image(PNG)

GoJS
1

Hello dear developers.
I faced the following problem. I must save the chart in PNG or PDF format. If I export directly from canvas to image or PDF, I lose all the icons(SVG) on the chart that I use for visualization. Icons are stored locally in the file format SVG. When exporting from canvas to SVG file, icons are saved.

I would also like to note that in the introduction of GO JS there is a disclaimer about this function, but there is no example of its use. GoJS Making SVG -- Northwoods Software “SVG export can be useful as content for a PDF. Most GoJS users who create PDFs do so by exporting Diagrams to SVG or images and place that content in their PDFs, on the server or elsewhere.”

If you have any resolves, I’ll be happy to hear them.

2

Are you saying that when you call Diagram.makeImageData the resulting image shows blank where the SVG Pictures are? But everything looks correct in the browser window? That sounds like a CORS security problem with those SVG files.

For PDF generation, see Minimal GoJS Sample Generating PDF.

3

If I save chart in PDF from canvas I lose SVG icons, too. Are there any resolves of my problem?

4

If you’d like my help, please answer my questions.

5

Yes, after call Diagram.makeImageData resulting image is blank.

6

If everything looks OK in the browser, then it’s probably a CORS security problem. Configure your web server appropriately (read more at https://enable-cors.org/ ), or read GoJS Pictures -- Northwoods Software

If you do not see the SVG images at all, then it’s probably a problem with either the URL or with the server not serving those files.

7

If I use next code:

diagram.nodeTemplate =
	$(go.Node, "Auto",
	$(go.Shape, {figure:"circle"}, { fill: "#FF8C00" },{ stroke: "#D35400" },{strokeWidth: 3}),
    $(go.Picture, { source: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/NASA_Mars_Rover.jpg/225px-NASA_Mars_Rover.jpg", width: 64, height: 64,background: 'lime', sourceCrossOrigin: function(pict) { return "anonymous"; }}),
			  $(go.TextBlock, { font: "normal normal 700 24px/3 cursive"},
				new go.Binding("text", "key"))
			);

resulting image is successfully saved, but if I use next code with local image path I have a problems (namely a lime-color square instead of SVG)

diagram.nodeTemplate =
			$(go.Node, "Auto",
			  $(go.Shape, {figure:"circle"}, { fill: "#FF8C00" },{ stroke: "#D35400" },{strokeWidth: 3}),
			     $(go.Picture, { source: "example.svg", width: 64, height: 64,background: 'lime', sourceCrossOrigin: function(pict) { return "anonymous"; }}),
			  $(go.TextBlock, { font: "normal normal 700 24px/3 cursive"},
				new go.Binding("text", "key"))
			);
8

Yes, that sounds like a CORS problem. It’s usually easiest to make sure the web server sets the headers for your images to allow any site to use them.

9

Thanks )))