Svg-vdom NPM | npm.io

svg-vdom

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

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