Error when foreignObject contains HTML <img> tag

[tomasdelvechio]

In my project I load images to svg graph (like static google map, profile photos, etc...).

When this images are presents into the svg, saveSvgAsPng launch a error in the console:

There is a workaround to solve this? The images are insert into svg tag foreignObject.

[exupero]

At the bottom of that error message should be a link that will let you open the URI in a new browser tab. In cases like this, the browser often supplies some helpful information not available in the error.

[tomasdelvechio]

Thanks for the advice, the link show this error:

This page contains the following errors:

"error on line 57 at column 79535: Opening and ending tag mismatch: img line 0 and a Below is a rendering of the page up to the first error."

But the render below message show correctly the image. The column 79535 don't exist in line 57.

Some other advice to debug this problem?

[exupero]

See how different browsers handle that data URI; they might give different information. Possibly you have <img> tag in your HTML that isn't self-closing (e.g. <img />).

The library is only handling an error that the browser is generating, so I don't think there's anything I can do about it in the library's code. If you find the reason and it's a bug in the library, feel free to re-open this issue.

[tomasdelvechio]

My <img /> is properly self-closed, but the lib, when set xmlns (code in var fos = clone.querySelectorAll('foreignObject > *');), strip the closed tag (I guess this behavior is guilt of the line outer.appendChild(clone);, but I can't to fix this)

[exupero]

Thanks. I do see that a self-closing img tag within foreignObject is getting mis-handled somehow, though it doesn't seem to be caused by adding the xmlns. I'll see if there's some way to remedy what the browser is doing when it generates the SVG. I'm open to any further insights anyone has.

[tomasdelvechio]

I don't think add xmlns attribute was the cause of the bug, but clone or appendChild function (or something else on the browser) delete the / in <img /> tag.

[exupero]

Looks like this is caused by how the browser returns innerHTML, which is also what appears in the DOM inspector. In the browsers I've checked, any <img /> tag does not appear self-closed, and innerHTML returns it not self-closed.

So far I haven't thought of a simple fix for this behavior. It seems like it could require parsing the HTML and regenerating it such that self-closing tags are handled properly. I'm open to suggestions.

[LimbaHub]

I solve this problem by add </img> tag after prepareSvg:

out$.svgAsDataUri = function(el, options, done) {
		requireDomNode(el);
		var result = out$.prepareSvg(el, options).then(function(_ref5) {
			var src = _ref5.src;
                        // add closed tag here
			src = src.replace(/(<img[^>]+)>/, "$1 ></img>");
			return (
				"data:image/svg+xml;base64," +
				window.btoa(reEncode(doctype + src))
			);
		});
		if (typeof done === "function") return result.then(done);
		return result;
	};

[nickyxu]

Dear all, I met the same problem with self-closed tag
. In my opinion, the problem will be for all the self-closed tag.

Hope some body to fix it.