Internet Explorer XML/SVG Custom Namespacing - Ext

Question

I am trying to render an SVG document inside of a webpage, and then capture the markup of that SVG document via 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 is working perfectly fine in Webkit and Firefox, but Internet Explorer (as usual) is causing problems. When the SVG gets rendered in IE, it looks fine, but when I get its markup via JavaScript/jQuery (XMLSerializer), the SVG strings root 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">

The SVG gets displayed properly, but, as you can see, the namespacing is messed up (and the attributes have been rearranged, but that's not really a concern) when the XML gets serialized. These messed up namespaces break the server-side code that processes the submitted SVG strings. Anyone able to shed some light on what is going on?

I've done an afternoon of Googling, and can't seem to come up with a whole lot. All of the examples that I've seen are of people trying to add namespaces via JavaScript/jQuery and getting similar results (namespace-wise) to what I'm seeing happen.

In hopes that someone over on MSDN knows what's going on, I've also opened a thread there.

Edit: added some details

Edit 2: added link to MSDN thread

Answer 1

I'd almost suggest avoiding JQuery when working with SVG. You run into issues with namespaces all the time.

Instead, try something like

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

Answer 2

If you can get XMLSerializer working consistently for you, that's definitely the way to go. I had been hitting this issue previously and it was happening because I was using jQuery to add SVG content to the page. I was able to get rid of it by making sure I used new DOMParser().parseFromString(content, 'text/xml') when I was reading content from a string and using the standard appendChild method to add the content.

However, I've found that there are quirks in several different browser implementations, particularly in older IE and Safari versions, that can make it a pain to work with if you have content with custom namespaces. If you don't do things just right, namespaces will get stripped or mangled, like you're seeing.

I finally gave up and wrote a simple one myself that should handle namespaces correctly across all browsers. YMMV, but it worked pretty effectively with the content I was using.

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

  // add in the element's 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;
}