Fix entities in SVG download

[jimallman]

We've had some problems with unsupported HTML entities (typically  ) in our SVG output. See this related Gitter chat for details.

This change serializes the main SVG node to Unicode, which removes all entities entirely, then relies on Base64 to encode all characters in the data URI. This is working and tested on devtree, see for example this tree with unlabeled internal nodes. This should download and print with no problems. Also note that I've added some diacritical marks and challenging punctuation in the topmost tip's label Mycôsphærëlla "zoomer" >!;. The new solution seems to handle these characters just fine.

[jimallman]

Should we need to explore heavier client-side libraries for decoding/encoding HTML entities to XML-compatible numeric entities, one promising option is https://www.npmjs.com/package/html-entities

[josephwb]

Doesn't seem to work for me. I tried this tree which gives the same error as before. Clicking on the utton in Safari brings up this new page:

[jimallman]

@josephwb These are working for me on devtree. Please try again after clearing your browser's cache. (This can be difficult in Safari. What version are you running?)

UPDATE: Hmm, I'm having trouble in Safari here too. Checking now for old script vs. bad logic...

[josephwb]

Ah, okay, I too can not get it to work on Safari. Works fine in Opera if that helps.

[jimallman]

Thanks, it looks like XMLSerializer works differently in Safari, preserving HTML entities like   and > (in tip label Mycôsphærëlla "zoomer" >!; above). I'll look at some more thorough fixes and update this thread when there's something to try.

[jar398]

Sounds like a bug in Safari XMLSerializer . The only mention of it I found was pbakaus/domvas#11 which is rather muted. I wonder whether there is a good way to report it.

[jimallman]

Sounds like a bug in Safari XMLSerializer

Not so much a bug as a subtle but intended behavior, apparently. The doctype of the chosen node's parent document (in this case, the surrounding web page) is used to determine how entities are treated, as described in this WebKit test. In short, if the parent doctype is XHTML, serialization will use HTML entities that will fail in "vanilla" XML documents.

Since document.doctype is a read-only property, the solution is to clone the SVG node and wrap it in a new, temporary XML document. Since DTDs are no longer recommended for SVG docs(!), we rely on document.implentation.createDocument() to create a "vanilla" XML doc if no doctype is provided.

This works for me on devtree, including in Safari, for both my preferred tree and the one @josephwb is attempting to use. I'll keep testing in other browsers, but please let me know if you see more failures on devtree!

UPDATE: Both trees linked above work for me in Firefox, Chrome, and Safari.