Question

This happens in Firefox, but not in Google Chrome.

I create an SVG ‘Image’ tag in an svg-web canvas like this:

im = document.createElementNS(svgns, 'image');
im.setAttributeNS(xlinkns, 'href', g.href);
canvas.appendChild(im);

And if I look in firebug or chrome’s debugger, the svg shows up self-closed like this:

<image xlink:href="..." />

But if I then print the parent of the svg element’s innerHTML, it returns this:

<svg><image xlink:href="..."></svg>

Note that the image tag is now unclosed, which causes errors down the line. Have I discovered a bug, or am I doing something wrong? And, probably much harder, is there a way in JavaScript to check and fix the tag?

Answer 1

HTML does not require empty tags to have a ending close. Even if the document were in XHTML I am not sure that it would return valid XML from the innerHTML property.

Edit: Mozilla Developer Center documentation for innerHTML says that you should not depend on what you get back out of the innerHTML and suggests some libraries as replacements specifically for use with XML.