svg-vdom

parse svg string and use it like dom

Usage no npm install needed!

<script type="module">
  import svgVdom from 'https://cdn.skypack.dev/svg-vdom';
</script>

README

svg-vdom

This is a util that parses SVG strings and uses DOM-like APIs to manipulate them.

中文版 | Change Logs

Installation and use

Install from npm

npm install svg-vdom -D

Install from yarn

yarn add svg-vdom -D

Use

import { parse, NodeType } from 'svg-vdom';
parse(`<?xml version="1.0" encoding="UTF-8"?>
<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>square</title>
    <g id="Page-1" stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd">
        <rect id="Rectangle-7" x="0" y="0" width="42" height="42"></rect>
    </g>
</svg>`).then(vdom => {
    console.log(vdom.childNodes.length); // 2
    console.log(vdom.querySelector('#Page-1')); // g#Page-1
    console.log(NodeType[vdom.nodeType]); // 'Document'
    console.log(vdom.toString());
});

Api

Name Description
parse Parse the SVG string to generate virtual-dom
NodeType Enum object of node type
ParentNode The class of the container node
TextNode The class of the text node
TagNode The class of the label node
stringifySVG Stringify virtual-dom
stringifyNode Stringify a node
stringifyTag Stringify a tag node
parseSelector Parse the selector string
selectorUnitCombinator CSS selector combo symbol enumeration object
attrModifier CSS attribute selector equal sign enumeration object
matchSelectorGroups Determine whether a node matches the CSS selector group
matchSelectors Determine whether a node matches the CSS selector
matchSelector Determine whether a node matches the CSS selector unit