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 newItem.props.xmlns. The 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.

Author: Mike Godfrey

If you're wondering which Mike Godfrey wrote this, here is the disambiguation page: https://peopleshader.com/shader/o9gd6XYvwn

Leave a Reply

Your email address will not be published. Required fields are marked *