Unwanted namespaces on SVG markup when using XMLSerializer in JavaScript with IE

Question

I am trying to use the JavaScript DOM API's XMLSerializer to convert an SVG element to its representative markup.

This is the basic code used to create the element and serialize it:

var el = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
el.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
el.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');

var markup = (new XMLSerializer()).serializeToString(el);
console.log(markup);

In Chrome, Firefox, Safari and Opera, it produces what I want:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"/>

But in Internet Explorer 9 through to IE11, I get this:

<svg xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xml:NS1="" NS1:xmlns:xlink="http://www.w3.org/1999/xlink" />

There are two problems with IE's output:

1. There are duplicate xmlns attributes. If I omit the second line of the JavaScript, then in IE there is just only one xmlns attribute in the markup, but in Firefox, Chrome, Safari and Opera, the attribute is missing.
2. It adds xml:NS1="". Why is this? NS1: is then prefixed to the xmlns:xlink attribute.

I think that I'm creating the attributes the correct way. For example, using setAttribute instead of setAttributeNS is correct here (more info), and changing this doesn't seem to fix the problem.

Any insights appreciated.

Edit: a related issue discusses a bug in Chrome's serialization that leads to the omission of namespaces. Partially relevant to the first problem (although all the other browsers act the same), but not relevant to the second problem.

Answer 1

OK, I think I've solved it. Followed the trail from this post to this WebKit bug report and this test case.

If I change the script to this, then it works:

var el = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
el.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns', 'http://www.w3.org/2000/svg');
el.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', 'http://www.w3.org/1999/xlink');

var markup = (new XMLSerializer()).serializeToString(el);
console.log(markup);

Ah namespaces.

But, it fails in an older version of WebKit that is still present in Safari 6.05 and PhantomJS (bug report - now fixed). Presumably the fix is incorporated into the latest Safari update (I haven't yet checked).