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:
- There are duplicate
xmlns
attributes. If I omit the second line of the JavaScript, then in IE there is just only onexmlns
attribute in the markup, but in Firefox, Chrome, Safari and Opera, the attribute is missing. - It adds
xml:NS1=""
. Why is this?NS1:
is then prefixed to thexmlns: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.