domChanger for SVG
It took a lot of research and false starts to resolve this issue, so the solution has been made into a blog post for future readers.
One of the more productive lightweight libraries out there is domChanger, which implements virtual dom functionality like is found in React, without the weird parser extensions. Instead, the input to domchanger is a description of the dom to be created in a format dubbed “jsonml.”
When taking the naive approach to apply domchanger to scalable vector graphics, one quickly runs into an implicit constraint of the library: domChanger elements do not include the xmlns attribute in new elements, and
svg elements require an explicitly stated namespace in order to operate on many web browsers.
To rectify this, the
apply method must be modified to extract the
top.namespaceURI, when building a new dom tree, and if creating a new tag element, to grab
document.createElement call is then changed to a
document.createElementNS call, with the xml namespace specified in the new element. This creates the svg element and its sub-elements with the appropriate namespace, and allows svg graphics on all svg-capable browsers tested.
For the code, see the domchanger.js from peopleshader.com, and compare against the canonical
domchanger.js found elsewhere on the web.