Edge's DOMParser.parseFromString converts known SVG attributes to all upper-case - by Sebastian Mueller

Status : 

  External<br /><br />
		This item may be valid but belongs to an external system out of the direct control of this product team.<br /><br />
		A more detailed explanation for the resolution of this particular item may have been provided in the comments section.

ID 2057021 Comments
Status Closed Workarounds
Type Bug Repros 6
Opened 11/25/2015 6:23:57 AM
Access Restriction Public


The DOMParser parses valid svg documents into a DOM that has attributes that are all upper-case for the known SVG attributes.
However creating elements like this (e.g. through recursive DOM copying) the attributes aren't recognized anymore and rendering fails.
Sign in to post a comment.
Posted by Microsoft on 4/4/2016 at 8:05 PM
We've moved! This issue is now being tracked at https://developer.microsoft.com/microsoft-edge/platform/issues/5579311/
Posted by DaveS_GOSS on 3/10/2016 at 1:41 AM
A little more detail the attribute will only be upper cased if you specify a valid value e.g. node.setAttributeNS(null, "clip-path", "foo"); will result in clip-path="foo" if you then change the value node.setAttributeNS(null, "clip-path", "none"); it results in CLIP-PATH="none".

It does seem to be restricted to presentation attributes which are case sensitive (https://www.w3.org/TR/SVG/styling.html#CaseSensitivity) and as this is a finite list (59) there may be a work around post serialization to replace the upper case attributes in the resulting string.

Personally I would rather it was fixed
Posted by tzimmermann on 12/16/2015 at 9:39 AM
I can totally confirm this issue, and it is a major problem for us here.
We are serialising SVG elements by enumerating the nodes' attributes and retrieving their names using 'attribute.name'. But it is pretty useless if the resulting string looks like this:

<rect FILL='white' />

If this is again deserialised, the resulting rect will have a black fill, because the attribute is not valid in all upper case.

There is not even an easy workaround for this (like using attribute.name.toLowerCase()) because *some* SVG attributes are camelCased, like 'markerWidth' for example.
Posted by Daniel McCabe on 12/11/2015 at 12:23 PM
This issue appears to be pretty easy to reproduce. I have the specifics nailed down a little more - it will only occur if you specify the xmlns attribute on the SVG element (required by the spec), and when it happens, it only appears to affect attributes that are unique to SVGs. So for example, fill, stroke, clip-path, font-family, and font-size will all get capitalized, but the width and height attributes won't.

I can also confirm that this is unrelated to DOMParser.parseFromString. I can see the issue if I just open an SVG inside of Edge, both in the DOM Explorer and if I use the console to fetch the attributes for the elements in question.

Any updates on this would be greatly appreciated, this issue is definitely causing us some headaches right now.
Posted by Sebastian Mueller on 12/3/2015 at 7:09 AM
Turns out this is not a problem with the parser, but a problem (regression) with the "attributes" property of svg elements:

var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("fill", "red")

In the console "rect" yields: "<rect FILL="red"></rect>"
rect.getAttribute("fill") == "red"
rect.getAttributeNode("fill").value == "red"
rect.getAttributeNodeNS(null, "fill").value == "red"


rect.getAttribute("FILL") == null
rect.getAttributeNode("FILL") == null
rect.getAttributeNodeNS(null, "FILL") == null


rect.attributes[0].name == "FILL"

Posted by Microsoft on 11/25/2015 at 10:30 AM
Hello Sebastian Mueller,

We appreciate your feedback, we will be investigating this issue further.

Best regards,
The MS Edge Team