makeSvg() not creating image properly

Hi,

I am trying to save the image with makeSvg<gs id=“7a086841-a98f-4005-94ee-7449d3e45fb1” ginger_software_uiphraseguid=“6c2f6e7d-1eba-457d-8e5a-d3e87e11f6d1” =“GINGER_SOFTWARE_mark”>() method, but the elements of the image are not visible as they are on the page. I have tried several properties, but nothing worked.

Thanks in advance.

I assume that what you are showing above is a screen capture, yes? You presumably spread out a bunch of nodes to see what happens when the document gets large in area (i.e. a large Diagram.documentBounds).

How are you looking at the SVG generated by Diagram.makeSvg()? Are you embedding the SVGElement in the DOM of the page? Are you saving its outerHtml to a file and looking at it using an SVG viewer such as a browser? Which SVG viewer are you using, and what do you see? Does using a different viewer produce different results?

Yes, I have attached captured screen. I haven’t anything specific that you mentioned. It was just makeSvg<gs id=“917ca17c-31a7-4554-a760-0f92e32a1164” ginger_software_uiphraseguid=“0802d9d5-30e2-4421-baa5-d76aa3d0805f” =“GINGER_SOFTWARE_mark”>() method with a few properties. I was experimenting the image with some properties, but couldn’t get the correct result<gs id=“c84e9f35-ce93-446b-b8dd-e2971bab1999” ginger_software_uiphraseguid=“82a57d6c-8161-4138-8d90-97d6389db7af” =“GINGER_SOFTWARE_mark”>. Below is my code.

                <gs id="66052cf2-e3bc-4877-af9c-2b110d15ccef" ginger_software_uiphraseguid="e6d23c21-03d6-40d7-95cc-a82369152ddc" ="GINGER_SOFTWARE_mark">img</gs> = <gs id="45c24064-00f7-4f1f-b2bd-ca62992aea12" ginger_software_uiphraseguid="e6d23c21-03d6-40d7-95cc-a82369152ddc" ="GINGER_SOFTWARE_mark">myDiagram</gs><gs id="fe4cdd20-f73b-4429-9faa-dccdcdbf071c" ginger_software_uiphraseguid="e6d23c21-03d6-40d7-95cc-a82369152ddc" ="GINGER_SOFTWARE_mark">.</gs>makeSvg<gs id="a50054cb-f395-4c91-9958-5ebac5e569d6" ginger_software_uiphraseguid="e6d23c21-03d6-40d7-95cc-a82369152ddc" ="GINGER_SOFTWARE_mark">(</gs>{
                    <gs id="eaf5e337-e281-4dd3-bf91-28789c5ce557" ginger_software_uiphraseguid="7fa21542-294a-440a-be53-baf8caa56cbc" ="GINGER_SOFTWARE_mark">scale</gs>: .1,
                    <gs id="9c73d077-ebd4-451a-b5b0-f5a511112d95" ginger_software_uiphraseguid="ef46bb4c-979b-4af7-b44e-8e5ad1a1259a" ="GINGER_SOFTWARE_mark">showGrid</gs>: true,
                    <gs id="988a258d-dae8-4717-921e-bc6fc91ea187" ginger_software_uiphraseguid="fe70e3fb-c156-459e-af15-15a8f0399caf" ="GINGER_SOFTWARE_mark">showTemporary</gs><gs id="ce4eba7e-36f8-4e18-b2a7-e47da3d7e9b2" ginger_software_uiphraseguid="fe70e3fb-c156-459e-af15-15a8f0399caf" ="GINGER_SOFTWARE_mark">:</gs>true,
                    <gs id="fa635e9a-3cc8-4bda-a166-e29b228ee601" ginger_software_uiphraseguid="409c4028-b9a9-44ca-a719-7e3cc4d053d5" ="GINGER_SOFTWARE_mark">position</gs>: new go<gs id="40115026-67e7-4923-8622-8f039ceb182c" ginger_software_uiphraseguid="409c4028-b9a9-44ca-a719-7e3cc4d053d5" ="GINGER_SOFTWARE_mark">.</gs>Point<gs id="c958fc02-0bef-4062-8a46-f628847cafda" ginger_software_uiphraseguid="409c4028-b9a9-44ca-a719-7e3cc4d053d5" ="GINGER_SOFTWARE_mark">(</gs>0,0),
                    <gs id="d995b770-e5f3-4c49-80ce-54710f9aff16" ginger_software_uiphraseguid="1f86b119-fcb5-4fcc-9718-971d79b71501" ="GINGER_SOFTWARE_mark">size</gs>: new go<gs id="99ce2f0f-56aa-430c-bb9b-4e00b9d1b109" ginger_software_uiphraseguid="1f86b119-fcb5-4fcc-9718-971d79b71501" ="GINGER_SOFTWARE_mark">.</gs>Size<gs id="b39f0da7-536d-40a4-ae60-b777289f977a" ginger_software_uiphraseguid="1f86b119-fcb5-4fcc-9718-971d79b71501" ="GINGER_SOFTWARE_mark">(</gs>8000, 8000)
                });

I tried to get the image with 2 options. First, I copied the <gs id=“a726f09a-1f6c-4010-be21-2777036b0715” ginger_software_uiphraseguid=“136645c8-04f1-4b89-b7fc-e4b5a7597158” =“GINGER_SOFTWARE_mark”>img<gs id=“7e39e7e0-748d-4626-9079-94f7c93dd40d” ginger_software_uiphraseguid=“136645c8-04f1-4b89-b7fc-e4b5a7597158” =“GINGER_SOFTWARE_mark”>.<gs id=“7f3941c4-ddb0-4f32-890f-d925ba7af71d” ginger_software_uiphraseguid=“136645c8-04f1-4b89-b7fc-e4b5a7597158” =“GINGER_SOFTWARE_mark”>outerHTML co<gs id=“da65da22-0259-4d65-b9d8-29c6e1c8c17f” ginger_software_uiphraseguid=“528eaf75-544d-46ca-a4f2-ea67e544c20f” =“GINGER_SOFTWARE_mark”>nte<gs id=“e977fb72-760f-425e-a6b2-6d627f9e86f2” ginger_software_uiphraseguid=“1233c4fb-f8ad-43d9-97c2-b093e4a52349” =“GINGER_SOFTWARE_mark”>nt and created and new <gs id=“38ed1498-3eb6-44e7-8c9e-832cdf56af7c” ginger_software_uiphraseguid=“528eaf75-544d-46ca-a4f2-ea67e544c20f” =“GINGER_SOFTWARE_mark”>.<gs id=“38ed1498-3eb6-44e7-8c9e-832cdf56af7c” ginger_software_uiphraseguid=“528eaf75-544d-46ca-a4f2-ea67e544c20f” =“GINGER_SOFTWARE_mark”>sv<gs id=“8aeb5d54-55a7-4ecc-8773-056188149238” ginger_software_uiphraseguid=“1233c4fb-f8ad-43d9-97c2-b093e4a52349” =“GINGER_SOFTWARE_mark”>g<gs id=“3e713dab-a487-4c85-b907-26735a9e615b” ginger_software_uiphraseguid=“1233c4fb-f8ad-43d9-97c2-b093e4a52349” =“GINGER_SOFTWARE_mark”> file with that. Second, I appended the output of <gs id=“5a8cd753-f1fb-46d6-9536-059fcb15ecc5” ginger_software_uiphraseguid=“18a3fb7f-89d0-4f50-8325-27ccbaa282fb” =“GINGER_SOFTWARE_mark”>above code in a new pop up window with the reference of <gs id=“11a72382-963d-4d9f-b40f-e051f1e0b17b” ginger_software_uiphraseguid=“18a3fb7f-89d0-4f50-8325-27ccbaa282fb” =“GINGER_SOFTWARE_mark”>url http://www.gojs.net/latest/intro/makingSVG.html. I have only <gs id=“7eae0cd7-9768-448a-8800-50d130c16a69” ginger_software_uiphraseguid=“6b546ace-ac0f-475c-87b9-3459444f0661” =“GINGER_SOFTWARE_mark”>browser to see the <gs id=“f1c23784-fc12-4bb1-8dd1-ed1a92144dd3” ginger_software_uiphraseguid=“6b546ace-ac0f-475c-87b9-3459444f0661” =“GINGER_SOFTWARE_mark”><gs id=“20ad9c82-689d-433c-945d-cf3e7b6237da” ginger_software_uiphraseguid=“6b546ace-ac0f-475c-87b9-3459444f0661” =“GINGER_SOFTWARE_mark”>svg images.

Thanks in advance

I’m not sure what might be happening.

If I open up the org chart editor sample (chosen because it has images):
http://gojs.net/latest/samples/orgChartEditor.html

And open the developer console, and paste in this:
document.body.appendChild(myDiagram.makeSvg({ scale: .5, showGrid: true, showTemporary:true, position: new go.Point(0,0), size: new go.Size(8000, 8000) }));
(same as your code but I changed the scale to .5 to see it better)
And scroll down on the page, I appropriately see the generated SVG with images included. This seems to work on Chrome, Firefox, and IE11.
What's different about this case?