svgdom

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 window를 만들거나, createWindow로 네임스페이스 URI와 루트 노드를 전달해 MathML 같은 일반 XML window를 만들 수 있습니다. 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 void 요소 직렬화, 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가 배열이라고 명시되어 있습니다. 이 프로젝트는 필요한 기능에 대한 이슈와 풀 리퀘스트를 받으며 기부 및 후원 링크를 제공합니다.