svg-pathstring-parser

svg-pathstring-parser

Parse SVG pathstrings in an efficient manner.

Installation

npm install --save svg-pathstring-parser

Motivation

There are already many SVG pathstring parsers. However, most simply return the different segments without normalize data, which quickly becomes annoying when you want to perform complex actions on a list of points.

The principle of this tool is to parse the pathstring and return an array of normalized objects.

Each point has a code (the SVG command), coordinates that represent the position, and an object parameters in which there are data describing the anchors of Bezier curves or data describing arcs.

The computed coordinates are always absolute, even for relative points. This way you always know very precisely where is the current point without having to do additional calculations and add exceptions in your code.

Usage

The parsePathstring function take a string as parameter and returns an array of objects. Each object represents a point with a code, coordinates and parameters.

Example

import parsePathstring from "svg-pathstring-parser"

const path = parsePathstring("M0 0l50,50 H100 v-50 Q150 150 200,200 t1.005e-15 2 A 50 50 0 1 0 300 300z")

/**
 * ==> [
 *   {
 *     code: "M",
 *     x: 0,
 *     y: 0,
 *     parameters: {},
 *   },
 *   {
 *     code: "l",
 *     x: 50,
 *     y: 50,
 *     parameters: {},
 *   },
 *   {
 *     code: "H",
 *     x: 100,
 *     y: 50,
 *     parameters: {},
 *   },
 *   {
 *     code: "v",
 *     x: 100,          <-- note the computed absolute position
 *     y: 0,
 *     parameters: {},
 *   },
 *   {
 *     code: "Q",
 *     x: 200,
 *     y: 200,
 *     parameters: {
 *       x1: 150,
 *       y1: 150,
 *     },
 *   },
 *   {
 *     code: "t",
 *     x: 200,
 *     y: 202,
 *     parameters: {    <-- the anchor has been automatically computed
 *       x1: 250,
 *       y1: 250,
 *     },
 *   },
 *   {
 *     code: "A",
 *     x: 300,
 *     y: 300,
 *     parameters: {
 *       rx: 50,
 *       ry: 50,
 *       rotation: 0,
 *       large: 1,
 *       sweep: 0,
 *     },
 *   },
 *   {
 *     code: "z",
 *     x: 0,
 *     y: 0,
 *     parameters: {},
 *   },
 * ]
 */

License

MIT