Internet Explorer XML / SVG Custom Namespace - Creating Extra / Invalid Namespaces

Question

I am trying to make an SVG document inside a webpage and then capture the markup of this SVG document using JavaScript. This SVG markup is then sent back to the server for processing.

The root of my SVG document is similar to the following:

<svg id="layout" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:foobar="http://www.foobar.com" foobar:attribute="123abc">

This works great in Webkit and Firefox, but Internet Explorer (as usual) causes problems. When an SVG gets rendered in IE, it looks good, but when I get its markup via JavaScript / jQuery (XMLSerializer), the SVG string node now looks like this:

<svg xmlns="http://www.w3.org/2000/svg" id="layout" xmlns:NS1="" NS1:foobar:attribute="123abc" xmlns:NS2="" NS2:xmlns:foobar="http://www.foobar.com">

SVG displays correctly, but as you can see, the namespace is confused (and the attributes were reordered, but this is not a problem) when the XML becomes serialized. These corrupt namespaces break server code that processes passed SVG strings. Can anyone shed light on what is happening?

I spent a day in googling and didn't seem to be able to come up with much. All the examples I've seen are people trying to add namespaces via JavaScript / jQuery and getting similar results (in namespace) to what I see.

In the hope that someone from MSDN knows what is happening, I also opened a stream there .

Edit: some details added

Edit 2: added link to MSDN stream

Answer 1

JQuery SVG. .

-

(new XMLSerializer()).serializeToString(document.querySelector("svg"))

Answer 2

XMLSerializer , . , , jQuery SVG . , , new DOMParser().parseFromString(content, 'text/xml'), appendChild .

, , IE Safari, , . , , .

, , , . YMMV, , .

function serializeSvgContent(element) {
  var result = '<' + element.nodeName;

  // add in the element attributes
  for (var i = 0; i < element.attributes.length; i++) {
    var attribute = element.attributes[i];
    var name = attribute.name || attribute.nodeName;
    var value = (attribute.value || attribute.nodeValue).replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&apos;');
    result += ' ' + name + '="' + value + '"';
  }

  if (element.childNodes.length > 0) {
    result += '>';

    // recursively add any child elements
    for (i = 0; i < element.childNodes.length; i++) {
      var child = element.childNodes[i];
      if (child.nodeType === 1) {
        result += serializeSvgContent(child);
      }
    }
    result += '</' + element.nodeName + '>';

  } else {
    result += '/>';
  }
  return result;
}