このプロジェクトについて

svgdomは、SVG.jsをNode.js上でヘッドレスに実行するために設計されたシンプルなDOM実装です。元々はその目的で作られましたが、より機能が充実し、XML、SVG、HTMLのDOMを必要とする誰でも利用できるようになりました。典型的な用途には、サーバー上でのSVGファイル生成、ブラウザなしでのSVGコードのテスト、SVGジオメトリを検査または変換するアセットパイプラインツールの構築などがあります。 SVG.js v3.xを始めるには、@svgdotjs/svg.jsとsvgdomをインストールする必要があります。svgdomからcreateSVGWindowを、@svgdotjs/svg.jsからSVGとregisterWindowをインポートします。createSVGWindowは、documentとSVGルートノードを持つwindowを返します。windowとdocumentを登録した後、document.documentElementからキャンバスを作成し、通常どおりSVG.jsを使用します。たとえば、矩形を描画し、塗りつぶし、移動し、その後SVGを文字列またはouterHTML経由で出力します。 SVG以外にも、svgdomはcreateHTMLWindowでHTMLウィンドウを作成したり、createWindowで名前空間URIとルートノード(MathMLなど)を渡して汎用XMLウィンドウを作成したりできます。Node.js 22.13以降では、svgdomをCommonJSモジュールとしてrequireで直接読み込むことができます。 このプロジェクトは意図的なDOMの逸脱を文書化しています。完全なブラウザDOM準拠よりも、ヘッドレスSVG用途向けの小さく便利なAPIを優先しています。document.createElementはdocumentの名前空間を継承するため、createSVGDocument().createElement('rect')はSVG名前空間のSVGRectElementを作成します。これは、createElementが名前空間なしの要素を作成し、createElementNSが必要となるブラウザのXML DOMとは異なります。HTMLの動作はdocumentの名前空間から推測されます。XHTML名前空間を持つdocumentは、HTMLの名前の大文字小文字処理、大文字小文字を区別しないHTML型セレクター、HTMLの空要素シリアライズ、およびCDATAに対するHTMLの制限を受け取ります。svgdomは現在、寛容なHTML解析アルゴリズムを実装していません。HTMLParserとinnerHTMLは厳格なXMLパーサーを使用するため、マークアップは整形式である必要があり、タグスープの回復、省略可能な終了タグ、および同様の動作はサポートされていません。 テキスト境界ボックスについては、まずフォントを読み込む必要があります。svgdomは、指定されたフォントのフォントファイルが見つからない場合、デフォルトでOpen Sans-Regularを読み込みます。設定オプションでは、フォントディレクトリの設定、フォントファミリーのファイルへのマッピング、初回使用時の読み込み遅延を避けるためのフォントのプリロードが可能です。同じ関数を直接インポートすることもできます。 既知の制限には、太字や斜体などのフォントプロパティが、対応するフォントが明示的に読み込まれている場合にのみサポートされることが含まれます。たとえば、Arial-italicをarial_italic.ttfにマッピングするなどです。querySelectorは限られた擬似クラスをサポートしています: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です。nth-childおよびnth-last-child擬似クラスはofセレクター構文もサポートしています。閉じ括弧を含む属性値は、引用符で囲まれていても、現在セレクター内で正しく解析されません。 svgdomは他のプロジェクトでも使用できますが、一部の関数はSVG.jsで必要とされないため、実装またはテストされていません。READMEには、childNodesが配列であることが記載されています。このプロジェクトは、必要な機能に関するissueとpull requestを受け付けており、寄付とスポンサーシップのリンクを提供しています。