Need some help on export and load as svgxml

[AlwaysNoobCoder]

Hi, I have developed some javascript code to intergrate xwiki with draw.io:

const imgDBLClick = function(evt) {
			log('drawio images double clicked')
			var source = evt.target
			//if (XWiki.editor != 'wysiwyg') return
			if (source.drawIoWindow == null || source.drawIoWindow.closed) {
				var receive = function(evt) {
					if (evt.data.length > 0 && evt.source == source.drawIoWindow) {
						var msg = JSON.parse(evt.data)
						if (msg.event == 'init') {
							let data = source.getAttribute('src')
							// if current chart is the placeholder, then replace it with a empty one
							// if you changed the placeholder chart in macro code, also update here
							if (shortHash(data) == '8e20ea29') {
								log('placeholder chart detected')
								data = '...'
							}
							source.drawIoWindow.postMessage(JSON.stringify({ action: 'load', xmlsvg: data }), '*')
						} else if (msg.event == 'save') {
							source.drawIoWindow.postMessage(JSON.stringify({ action: 'export', format: 'xmlsvg', spinKey: 'saving' }), '*')
						} else if (msg.event == 'export') {
							source.setAttribute('src', msg.data)
							$(source).closest('div.macro.cke_widget_element').attr('data-macro', 'startmacro:drawio|-||-|' + msg.data)
						}
						if (msg.event == 'exit' || msg.event == 'export') {
							window.removeEventListener('message', receive)
							source.drawIoWindow.close()
							source.drawIoWindow = null
						}
					}
				}
				window.addEventListener('message', receive)
				source.drawIoWindow = window.open(drawioUrl)
			} else {
				source.drawIoWindow.focus()
			}
			// prevent default macro editing dialog
			evt.stopPropagation()
		}

my problem is: when using png + diagram embedded, it works, but after switch to svg + diagram embedded , the export function works, but next time when I load it in drawio again, it's empty.

the message I post to drawio window was like below :

data:image/svg+xml;base64,PHN2ZyB4bWxucz0ia...

any hint on this ?

[alderg]

Does the exported SVG have the content attribute and is it still present when loading it again?

[AlwaysNoobCoder]

I am wondering, should I decode the base64 encoded dataurl, then pass the svg xml contents ?

[AlwaysNoobCoder]

the prameters used to open drawio window, if that matters:

https://draw.itps.xxx.com/?embed=1&ui=atlas&spin=1&modified=unsavedChanges&proto=json

[AlwaysNoobCoder]

tried both, not work:

const dw1 = window.open('https://draw.itps.xxx.com/?embed=1&ui=atlas&spin=1&modified=unsavedChanges&proto=json')
undefined
dw1.postMessage(JSON.stringify({ action: 'load', xmlsvg: '<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="81px" height="81px" viewBox="-0.5 -0.5 81 81" content="&lt;mxfile host=&quot;draw.itps.bgzchina.com&quot; modified=&quot;2024-05-27T03:24:33.437Z&quot; agent=&quot;Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36&quot; etag=&quot;5S5IjqxgIVbPwODTlSpk&quot; version=&quot;22.1.5&quot; type=&quot;device&quot;&gt;&lt;diagram name=&quot;Page-1&quot; id=&quot;ky3eC6V3Su1e5stt8Zdm&quot;&gt;jZJNb4MwDIZ/DcdJQKp1O66MbtpUaRLSPo4RGBItISikC+zXLyxOAVWVeorz2LGd145IJocnTTt2UBWIKI2rISKPUZqm8XbjjomMniRJHHvSaF4hm0HBfwFhCDvyCvpVoFFKGN6tYanaFkqzYlRrZddhtRLrqh1t4AwUJRXn9INXhnl6l25n/gy8YaFycnvvPZKGYPxJz2il7AKRPCKZVsp4Sw4ZiEm9oIt/t7/gPTWmoTXXPNDstfx8OXy/fT28230tIc+KG8zyQ8URP4zNmjEo4LI4sd1lZxk3UHS0nDzWDdwxZqRwt8SZtO/8BGo+gCu6w9ygDQwXm05OUrglAiXB6NGF4ANCUD3cn01YH7sYBiK2mENgFMffnDLPCjkDRQrXeRj/vsVOk/wP&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(255, 255, 255);"><defs/><g><ellipse cx="40" cy="40" rx="40" ry="40" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/></g></svg>' }), '*')
undefined
dw1.postMessage(JSON.stringify({ action: 'load', xmlsvg: 'data:image/xmlsvg;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCEtLSBEbyBub3QgZWRpdCB0aGlzIGZpbGUgd2l0aCBlZGl0b3JzIG90aGVyIHRoYW4gZHJhdy5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSI4MXB4IiBoZWlnaHQ9IjgxcHgiIHZpZXdCb3g9Ii0wLjUgLTAuNSA4MSA4MSIgY29udGVudD0iJmx0O214ZmlsZSBob3N0PSZxdW90O2RyYXcuaXRwcy5iZ3pjaGluYS5jb20mcXVvdDsgbW9kaWZpZWQ9JnF1b3Q7MjAyNC0wNS0yN1QwMzoyNDozMy40MzdaJnF1b3Q7IGFnZW50PSZxdW90O01vemlsbGEvNS4wIChYMTE7IExpbnV4IHg4Nl82NCkgQXBwbGVXZWJLaXQvNTM3LjM2IChLSFRNTCwgbGlrZSBHZWNrbykgQ2hyb21lLzEyMi4wLjAuMCBTYWZhcmkvNTM3LjM2JnF1b3Q7IGV0YWc9JnF1b3Q7NVM1SWpxeGdJVmJQd09EVGxTcGsmcXVvdDsgdmVyc2lvbj0mcXVvdDsyMi4xLjUmcXVvdDsgdHlwZT0mcXVvdDtkZXZpY2UmcXVvdDsmZ3Q7Jmx0O2RpYWdyYW0gbmFtZT0mcXVvdDtQYWdlLTEmcXVvdDsgaWQ9JnF1b3Q7a3kzZUM2VjNTdTFlNXN0dDhaZG0mcXVvdDsmZ3Q7alpKTmI0TXdESVovRGNkSlFLcDFPNjZNYnRwVWFSTFNQbzRSR0JJdElTaWtDK3pYTHl4T0FWV1Zlb3J6MkxHZDE0NUlKb2NuVFR0MlVCV0lLSTJySVNLUFVacW04WGJqam9tTW5pUkpISHZTYUY0aG0wSEJmd0ZoQ0R2eUN2cFZvRkZLR042dFlhbmFGa3F6WWxSclpkZGh0UkxycWgxdDRBd1VKUlhuOUlOWGhubDZsMjVuL2d5OFlhRnljbnZ2UFpLR1lQeEp6MmlsN0FLUlBDS1pWc3A0U3c0WmlFbTlvSXQvdDcvZ1BUV21vVFhYUE5Ec3RmeDhPWHkvZlQyODIzMHRJYytLRzh6eVE4VVJQNHpObWpFbzRMSTRzZDFsWnhrM1VIUzBuRHpXRGR3eFpxUnd0OFNadE8vOEJHbytnQ3U2dzl5Z0RRd1htMDVPVXJnbEFpWEI2TkdGNEFOQ1VEM2NuMDFZSDdzWUJpSzJtRU5nRk1mZm5ETFBDamtEUlFyWGVSai92c1ZPay93UCZsdDsvZGlhZ3JhbSZndDsmbHQ7L214ZmlsZSZndDsiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiByZ2IoMjU1LCAyNTUsIDI1NSk7Ij48ZGVmcy8+PGc+PGVsbGlwc2UgY3g9IjQwIiBjeT0iNDAiIHJ4PSI0MCIgcnk9IjQwIiBmaWxsPSJyZ2IoMjU1LCAyNTUsIDI1NSkiIHN0cm9rZT0icmdiKDAsIDAsIDApIiBwb2ludGVyLWV2ZW50cz0iYWxsIi8+PC9nPjwvc3ZnPg==' }), '*')
undefined
const dw2 = window.open('https://draw.itps.xxx.com/?embed=1&ui=atlas&spin=1&modified=unsavedChanges&proto=json')
undefined
dw2.postMessage(JSON.stringify({ action: 'load', xmlsvg: 'data:image/xmlsvg;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCEtLSBEbyBub3QgZWRpdCB0aGlzIGZpbGUgd2l0aCBlZGl0b3JzIG90aGVyIHRoYW4gZHJhdy5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSI4MXB4IiBoZWlnaHQ9IjgxcHgiIHZpZXdCb3g9Ii0wLjUgLTAuNSA4MSA4MSIgY29udGVudD0iJmx0O214ZmlsZSBob3N0PSZxdW90O2RyYXcuaXRwcy5iZ3pjaGluYS5jb20mcXVvdDsgbW9kaWZpZWQ9JnF1b3Q7MjAyNC0wNS0yN1QwMzoyNDozMy40MzdaJnF1b3Q7IGFnZW50PSZxdW90O01vemlsbGEvNS4wIChYMTE7IExpbnV4IHg4Nl82NCkgQXBwbGVXZWJLaXQvNTM3LjM2IChLSFRNTCwgbGlrZSBHZWNrbykgQ2hyb21lLzEyMi4wLjAuMCBTYWZhcmkvNTM3LjM2JnF1b3Q7IGV0YWc9JnF1b3Q7NVM1SWpxeGdJVmJQd09EVGxTcGsmcXVvdDsgdmVyc2lvbj0mcXVvdDsyMi4xLjUmcXVvdDsgdHlwZT0mcXVvdDtkZXZpY2UmcXVvdDsmZ3Q7Jmx0O2RpYWdyYW0gbmFtZT0mcXVvdDtQYWdlLTEmcXVvdDsgaWQ9JnF1b3Q7a3kzZUM2VjNTdTFlNXN0dDhaZG0mcXVvdDsmZ3Q7alpKTmI0TXdESVovRGNkSlFLcDFPNjZNYnRwVWFSTFNQbzRSR0JJdElTaWtDK3pYTHl4T0FWV1Zlb3J6MkxHZDE0NUlKb2NuVFR0MlVCV0lLSTJySVNLUFVacW04WGJqam9tTW5pUkpISHZTYUY0aG0wSEJmd0ZoQ0R2eUN2cFZvRkZLR042dFlhbmFGa3F6WWxSclpkZGh0UkxycWgxdDRBd1VKUlhuOUlOWGhubDZsMjVuL2d5OFlhRnljbnZ2UFpLR1lQeEp6MmlsN0FLUlBDS1pWc3A0U3c0WmlFbTlvSXQvdDcvZ1BUV21vVFhYUE5Ec3RmeDhPWHkvZlQyODIzMHRJYytLRzh6eVE4VVJQNHpObWpFbzRMSTRzZDFsWnhrM1VIUzBuRHpXRGR3eFpxUnd0OFNadE8vOEJHbytnQ3U2dzl5Z0RRd1htMDVPVXJnbEFpWEI2TkdGNEFOQ1VEM2NuMDFZSDdzWUJpSzJtRU5nRk1mZm5ETFBDamtEUlFyWGVSai92c1ZPay93UCZsdDsvZGlhZ3JhbSZndDsmbHQ7L214ZmlsZSZndDsiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiByZ2IoMjU1LCAyNTUsIDI1NSk7Ij48ZGVmcy8+PGc+PGVsbGlwc2UgY3g9IjQwIiBjeT0iNDAiIHJ4PSI0MCIgcnk9IjQwIiBmaWxsPSJyZ2IoMjU1LCAyNTUsIDI1NSkiIHN0cm9rZT0icmdiKDAsIDAsIDApIiBwb2ludGVyLWV2ZW50cz0iYWxsIi8+PC9nPjwvc3ZnPg==' }), '*')

[AlwaysNoobCoder]

the format should be xml instead of xmlsvg