svgdom

svgdom é uma implementação de DOM direta, projetada para fazer o SVG.js rodar headless no Node.js. Embora tenha sido originalmente criada para esse propósito, tornou-se mais completa em recursos e pode ser usada por qualquer pessoa que precise de um DOM XML, SVG ou HTML. Usos típicos incluem gerar arquivos SVG em um servidor, testar código SVG sem navegador e construir ferramentas de pipeline de assets que inspecionam ou transformam geometria SVG. Para começar com o SVG.js v3.x, é necessário instalar @svgdotjs/svg.js e svgdom. Você importa createSVGWindow de svgdom e SVG mais registerWindow de @svgdotjs/svg.js. createSVGWindow retorna uma janela com um document e um nó raiz SVG. Depois de registrar a janela e o document, você cria um canvas a partir de document.documentElement e usa o SVG.js normalmente, por exemplo desenhando um retângulo, preenchendo-o, movendo-o e então gerando o SVG como string ou via outerHTML. Além de SVG, svgdom pode criar uma janela HTML com createHTMLWindow, ou uma janela XML genérica com createWindow, passando um URI de namespace e um nó raiz, como MathML. No Node.js 22.13 ou mais recente, svgdom pode ser carregado diretamente com require como um módulo CommonJS. O projeto documenta desvios intencionais do DOM. Ele prioriza uma API pequena e conveniente para uso headless de SVG em vez de conformidade completa com o DOM de navegadores. document.createElement herda o namespace do documento, então createSVGDocument().createElement('rect') cria um SVGRectElement no namespace SVG, diferentemente de um DOM XML de navegador, onde createElement cria um elemento sem namespace e createElementNS é necessário. O comportamento HTML é inferido a partir do namespace do documento: um documento com o namespace XHTML recebe capitalização de nomes HTML, seletores de tipo HTML sem distinção entre maiúsculas e minúsculas, serialização de elementos vazios HTML e a restrição HTML sobre CDATA. Atualmente, svgdom não implementa o algoritmo de parsing HTML tolerante; HTMLParser e innerHTML usam um parser XML estrito, então a marcação deve estar bem formada e recuperação de tag-soup, tags de fechamento opcionais e comportamentos semelhantes não são suportados. Para caixas delimitadoras de texto, as fontes devem ser carregadas primeiro. svgdom carrega Open Sans-Regular por padrão quando nenhum arquivo de fonte para a fonte especificada é encontrado. Opções de configuração permitem definir um diretório de fontes, mapear famílias de fontes para arquivos e pré-carregar fontes para evitar atraso no carregamento no primeiro uso. As mesmas funções podem ser importadas diretamente. Limitações conhecidas incluem propriedades de fonte como negrito e itálico sendo suportadas apenas quando a fonte correspondente é explicitamente carregada, por exemplo mapeando Arial-italic para arial_italic.ttf. querySelector suporta um conjunto limitado de 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 e where. As pseudo-classes nth-child e nth-last-child também suportam a sintaxe do seletor of. Valores de atributos contendo um colchete de fechamento atualmente não são analisados corretamente em seletores, mesmo quando entre aspas. svgdom pode ser usado em outros projetos, embora algumas funções não sejam necessárias para o SVG.js e, portanto, não sejam implementadas ou testadas. O README observa que childNodes é um array. O projeto aceita issues e pull requests para recursos necessários e oferece links de doação e patrocínio.