When using the JavaScript XMLSerializer to parse an SVG document from the DOM, custom namespaces are not handled properly. To demonstrate this problem, I've created this JsFiddle (sorry, no link -- apparently my account needs to be verified first? Anyway, here it is: http://jsfiddle.net/dm3mQ/).
If you run the fiddle with Webkit/Firefox, the string that the XMLSerializer generates when parsing the SVG element is accurate (it matches the source view of the page), but when using Internet Explorer, it is mangled.
For Example (see JsFiddle for details):
With the following sample SVG markup:
<svg id="testSvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:foo="http://www.foo.com" version="1.1" viewBox="0 0 500 500" preserveAspectRatio="xMinYMin"><rect id="testRect" x="0" y="0" width="300" height="200" stroke="blue" fill="yellow" foo:bar="123abc"></rect></svg>
IE's XMLSerializer returns the following string:
<svg xmlns="http://www.w3.org/2000/svg" id="testSvg" viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet" version="1.1" xmlns:NS1="" NS1:xmlns:foo="http://www.foo.com"><rect id="testRect" fill="yellow" stroke="blue" x="0" y="0" width="300" height="200" xmlns:NS2="" NS2:foo:bar="123abc" /></svg>
As you can see, the custom namespace declaration for "xmlns:foo" is mangled into "NS1:xmlns:foo." On the <rect> element, the attribute "foo:bar" is also mangled, and an additional, invalid "xmlns:NS2" namespace declaration is added.
Is there a workaround for this? Is this a known problem?
Edit: I should note that even in IE, the page source is correct. The problem is happening when XMLSerializer does its thing...