{"id":18179325,"url":"https://github.com/svgdotjs/svgdom","last_synced_at":"2025-05-16T04:05:16.332Z","repository":{"id":37550384,"uuid":"85410880","full_name":"svgdotjs/svgdom","owner":"svgdotjs","description":"Straightforward DOM implementation to make SVG.js run headless on Node.js","archived":false,"fork":false,"pushed_at":"2025-04-03T07:40:05.000Z","size":982,"stargazers_count":283,"open_issues_count":25,"forks_count":57,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-05-09T15:08:19.521Z","etag":null,"topics":["dom","svg","svg-dom","svgdom","svgjs","xml"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/svgdotjs.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["fuzzyma"]}},"created_at":"2017-03-18T15:18:38.000Z","updated_at":"2025-04-03T07:39:40.000Z","dependencies_parsed_at":"2023-02-15T23:46:16.885Z","dependency_job_id":"3b95dd54-450b-4c64-b7cc-93775ad60414","html_url":"https://github.com/svgdotjs/svgdom","commit_stats":{"total_commits":168,"total_committers":19,"mean_commits":8.842105263157896,"dds":"0.49404761904761907","last_synced_commit":"82089a14da66a1c139f80f0ed6ffe9b45e7ee32e"},"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svgdotjs%2Fsvgdom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svgdotjs%2Fsvgdom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svgdotjs%2Fsvgdom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svgdotjs%2Fsvgdom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/svgdotjs","download_url":"https://codeload.github.com/svgdotjs/svgdom/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254464895,"owners_count":22075570,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dom","svg","svg-dom","svgdom","svgjs","xml"],"created_at":"2024-11-02T18:09:05.979Z","updated_at":"2025-05-16T04:05:16.285Z","avatar_url":"https://github.com/svgdotjs.png","language":"JavaScript","funding_links":["https://github.com/sponsors/fuzzyma","https://www.paypal.com/cgi-bin/webscr?cmd=_donations\u0026business=ulima.ums%40googlemail.com\u0026lc=US\u0026item_name=SVG.JS\u0026currency_code=EUR\u0026bn=PP-DonationsBF%3Abtn_donate_74x21.png%3ANonHostedGuest","https://github.com/sponsors/Fuzzyma"],"categories":[],"sub_categories":[],"readme":"# svgdom\n\n\u003e Straightforward DOM implementation to make SVG.js run headless on Node.js\n\nWhile 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.\n\n## Get started with svg.js v3.x\n\n*for older versions of svg.js checkout older versions of svgdom*\n\n```\nnpm install @svgdotjs/svg.js svgdom\n```\n\n```js\nimport { createSVGWindow } from 'svgdom'\nimport { SVG, registerWindow } from '@svgdotjs/svg.js'\n\n// returns a window with a document and an svg root node\nconst window = createSVGWindow()\nconst document = window.document\n\n// register window and document\nregisterWindow(window, document)\n\n// create canvas\nconst canvas = SVG(document.documentElement)\n\n// use svg.js as normal\ncanvas.rect(100, 100).fill('yellow').move(50,50)\n\n// get your svg as string\nconsole.log(canvas.svg())\n// or\nconsole.log(canvas.node.outerHTML)\n```\n\n## Create an HTML Dom or XML Dom\n\n```js\n// create HTML window with a document and an html root node\nimport { createHTMLWindow } from 'svgdom'\nconst window = createHTMLWindow()\n\n// create XML window with a document and a given xml root node\nimport { createWindow } from 'svgdom'\nconst window = createWindow(namespaceURI, rootNode)\n// e.g. createWindow('http://www.w3.org/1998/Math/MathML', 'math')\n```\n\n## Use svgdom as cjs module\n\nsvgdom is used best as esm module. However, if you still require cjs, you have to import the module via the async import function: \n\n```js\nconst main = async () =\u003e {\n    const { createSVGWindow } = await import('svgdom')\n}\nmain()\n```\n\n## Fonts\n\nIn 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.\nThe following options must be set in order to load your own fonts:\n\n```js\nimport { config } from 'svgdom'\nconfig.\n    // your font directory\n    .setFontDir('./fonts')\n    // map the font-family to the file\n    .setFontFamilyMappings({'Arial': 'arial.ttf'})\n    // you can preload your fonts to avoid the loading delay\n    // when the font is used the first time\n    .preloadFonts()\n\n// Alternatively you can import the functions itself and use them\nconst {setFontDir, setFontFamilyMappings, preloadFonts} = require('svgdom')\nsetFontDir('./fonts')\nsetFontFamilyMappings({'Arial': 'arial.ttf'})\npreloadFonts()\n```\n\n## Limitations\nAlmost all functions of svg.js work properly with svgdom. However there are a few known limitations:\n\n- font properties like bold, italic... are only supported when you explicitely load that font e.g.\n    ```js\n    setFontFamilyMappings({'Arial-italic': 'arial_italic.ttf'})\n    ```\n- `querySelector` only supports the following pseudo classes:\n    - `first-child`\n    - `last-child`\n    - `nth-child`\n    - `nth-last-child`\n    - `first-of-type`\n    - `last-of-type`\n    - `nth-of-type`\n    - `nth-last-of-type`\n    - `only-child`\n    - `only-of-type`\n    - `root`\n    - `not`\n    - `matches`\n    - `scope`\n- special chars in attribute values: `#` and `.` are allowed but things like `:` or `[]` will break the selector\n\n## Using svgdom in your own projects\n\nAlbeit this dom implementation aims to work with svgjs, it is of course possible to use it in your own projects.\nKeep in mind, that some functions are just not needed in svgjs and therefore not implemented or tested.\nIf you need a certain feature don't hesistate to open an issue or submit a pull request.\n\nLast thing to say: **childNodes is an array!** (yet)\n\n[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.com/cgi-bin/webscr?cmd=_donations\u0026business=ulima.ums%40googlemail.com\u0026lc=US\u0026item_name=SVG.JS\u0026currency_code=EUR\u0026bn=PP-DonationsBF%3Abtn_donate_74x21.png%3ANonHostedGuest) or [![Sponsor](https://img.shields.io/badge/Sponsor-svgdom-green.svg)](https://github.com/sponsors/Fuzzyma)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvgdotjs%2Fsvgdom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsvgdotjs%2Fsvgdom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvgdotjs%2Fsvgdom/lists"}