About this project

svgdom is a straightforward DOM implementation designed to make SVG.js run headless on Node.js. Although it was originally built for that purpose, it has become more feature complete and can be used by anyone needing an XML, SVG, or HTML DOM. Typical uses include generating SVG files on a server, testing SVG code without a browser, and building asset-pipeline tools that inspect or transform SVG geometry. Getting started with SVG.js v3.x requires installing @svgdotjs/svg.js and svgdom. You import createSVGWindow from svgdom and SVG plus registerWindow from @svgdotjs/svg.js. createSVGWindow returns a window with a document and an SVG root node. After registering the window and document, you create a canvas from document.documentElement and use SVG.js normally, for example drawing a rectangle, filling it, moving it, and then outputting the SVG as a string or via outerHTML. Beyond SVG, svgdom can create an HTML window with createHTMLWindow, or a generic XML window with createWindow, passing a namespace URI and root node, such as MathML. On Node.js 22.13 or newer, svgdom can be loaded directly with require as a CommonJS module. The project documents intentional DOM deviations. It favors a small, convenient API for headless SVG use over complete browser DOM conformance. document.createElement inherits the document namespace, so createSVGDocument().createElement('rect') creates an SVGRectElement in the SVG namespace, unlike a browser XML DOM where createElement creates an element without a namespace and createElementNS is required. HTML behavior is inferred from the document namespace: a document with the XHTML namespace receives HTML name casing, case-insensitive HTML type selectors, HTML void-element serialization, and the HTML restriction on CDATA. svgdom does not currently implement the forgiving HTML parsing algorithm; HTMLParser and innerHTML use a strict XML parser, so markup must be well-formed and tag-soup recovery, optional end tags, and similar behavior are not supported. For text bounding boxes, fonts must be loaded first. svgdom loads Open Sans-Regular by default when no font file for the specified font is found. Configuration options allow setting a font directory, mapping font families to files, and preloading fonts to avoid loading delay on first use. The same functions can be imported directly. Known limitations include font properties such as bold and italic only being supported when the corresponding font is explicitly loaded, for example mapping Arial-italic to arial_italic.ttf. querySelector supports a limited set of pseudo classes: empty, first-child, last-child, nth-child, nth-last-child, first-of-type, last-of-type, nth-of-type, nth-last-of-type, only-child, only-of-type, has, is, root, not, matches, scope, and where. The nth-child and nth-last-child pseudo classes also support the of selector syntax. Attribute values containing a closing bracket are not currently parsed correctly in selectors, even when quoted. svgdom can be used in other projects, though some functions are not needed by SVG.js and therefore not implemented or tested. The README notes that childNodes is an array. The project accepts issues and pull requests for needed features and offers donation and sponsorship links.