# svgdom

> Straightforward DOM implementation for SVG, HTML and XML

Latest version **0.1.29** (published 2026-09-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install svgdom
pnpm add svgdom
yarn add svgdom
bun add svgdom
```

## Health

**Score 68/100 (B)** — status: active.

Positive: has types package; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.1.29 |
| Published | 2026-09-09 |
| First published | 2017-03-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/svgdom) |
| Module format | ESM + CommonJS |
| Node | >=22.13.0 |
| Dependencies | 3 |
| Unpacked size | 498.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Ulrich-Matthias Schäfer |
| Maintainers | fuzzyma |
| Keywords | svgjs, dom, xml, xmldom, svgdom, nodejs |

## Links

- npm: https://www.npmjs.com/package/svgdom
- Repository: https://github.com/svgdotjs/svgdom
- Homepage: https://github.com/svgdotjs/svgdom#readme
- Issues: https://github.com/svgdotjs/svgdom/issues
- Funding: https://github.com/sponsors/Fuzzyma
- npm.io page: https://npm.io/package/svgdom

## Dependencies (3)

- [sax](https://npm.io/package/sax.md) ^1.4.1
- [fontkit](https://npm.io/package/fontkit.md) ^2.0.4
- [image-size](https://npm.io/package/image-size.md) ^2.0.2

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 0.1.29 (latest) — 2026-09-09
- 0.1.28 — 2026-07-20
- 0.1.27 — 2026-07-18
- 0.1.26 — 2026-07-17
- 0.1.25 — 2026-07-16
- 0.1.24 — 2026-07-15
- 0.1.23 — 2026-01-15
- 0.1.22 — 2025-07-09
- 0.1.21 — 2025-04-03
- 0.1.20 — 2025-02-21
- 0.1.19 — 2023-10-23
- 0.1.18 — 2023-10-16
- 0.1.17 — 2023-10-05
- 0.1.16 — 2023-09-03
- 0.1.15 — 2023-09-03
- … 35 more at https://npm.io/package/svgdom/versions

## README

# svgdom

> Straightforward DOM implementation to make SVG.js run headless on Node.js

While this dom implementation was designed to run svg.js on node, it now is much 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.

## Get started with svg.js v3.x

_for older versions of svg.js checkout older versions of svgdom_

```
pnpm add @svgdotjs/svg.js svgdom
```

```js
import { createSVGWindow } from 'svgdom'
import { SVG, registerWindow } from '@svgdotjs/svg.js'

// returns a window with a document and an svg root node
const window = createSVGWindow()
const document = window.document

// register window and document
registerWindow(window, document)

// create canvas
const canvas = SVG(document.documentElement)

// use svg.js as normal
canvas.rect(100, 100).fill('yellow').move(50, 50)

// get your svg as string
console.log(canvas.svg())
// or
console.log(canvas.node.outerHTML)
```

## Create an HTML Dom or XML Dom

```js
// create HTML window with a document and an html root node
import { createHTMLWindow } from 'svgdom'
const window = createHTMLWindow()

// create XML window with a document and a given xml root node
import { createWindow } from 'svgdom'
const window = createWindow(namespaceURI, rootNode)
// e.g. createWindow('http://www.w3.org/1998/Math/MathML', 'math')
```

## Use svgdom as a CommonJS module

On Node.js 22.13 or newer, svgdom can be loaded directly with `require()`:

```js
const { createSVGWindow } = require('svgdom')
```

## Intentional DOM deviations

svgdom favors a small, convenient API for headless SVG use over complete browser DOM conformance. In particular:

- `document.createElement(name)` inherits the document namespace. For example, `createSVGDocument().createElement('rect')` creates an `SVGRectElement` in the SVG namespace. In a browser XML DOM, `createElement()` creates an element without a namespace and `createElementNS()` is required instead. Use `createElementNS()` when the namespace must be explicit.
- HTML behavior is inferred from the document namespace. A document whose namespace is `http://www.w3.org/1999/xhtml` receives HTML name casing, case-insensitive HTML type selectors, HTML void-element serialization, and the HTML restriction on CDATA. This also means that `createDocument(HTML_NAMESPACE, 'html')` is treated like an HTML document for these operations, whereas the browser DOM specifies an XML document.
- 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 HTML tag-soup recovery, optional end tags, and similar parsing behavior are not supported.

## Fonts

In order to calculate bounding boxes for text the font needs to be loaded first. `svgdom` loads `Open Sans-Regular` by default when no font file for the specified font was found.
The following options must be set in order to load your own fonts:

```js
import { config } from 'svgdom'
config.
    // your font directory
    .setFontDir('./fonts')
    // map the font-family to the file
    .setFontFamilyMappings({'Arial': 'arial.ttf'})
    // you can preload your fonts to avoid the loading delay
    // when the font is used the first time
    .preloadFonts()

// Alternatively you can import the functions itself and use them
const {setFontDir, setFontFamilyMappings, preloadFonts} = require('svgdom')
setFontDir('./fonts')
setFontFamilyMappings({'Arial': 'arial.ttf'})
preloadFonts()
```

## Limitations

Almost all functions of svg.js work properly with svgdom. However there are a few known limitations:

- font properties like bold, italic... are only supported when you explicitely load that font e.g.
  ```js
  setFontFamilyMappings({ 'Arial-italic': 'arial_italic.ttf' })
  ```
- `querySelector` only supports the following 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`
  - `where`
    The `nth-child` and `nth-last-child` pseudo classes also support the `of <selector>` syntax.
- attribute values containing `]` are not currently parsed correctly in selectors, even when quoted

## Using svgdom in your own projects

Albeit this dom implementation aims to work with svgjs, it is of course possible to use it in your own projects.
Keep in mind, that some functions are just not needed in svgjs and therefore not implemented or tested.
If you need a certain feature don't hesistate to open an issue or submit a pull request.

Last thing to say: **childNodes is an array!** (yet)

[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=ulima.ums%40googlemail.com&lc=US&item_name=SVG.JS&currency_code=EUR&bn=PP-DonationsBF%3Abtn_donate_74x21.png%3ANonHostedGuest) or [![Sponsor](https://img.shields.io/badge/Sponsor-svgdom-green.svg)](https://github.com/sponsors/Fuzzyma)

---
_Source: https://npm.io/package/svgdom · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._