svg-path-segments

svg-path-segments

A fast SVG path parser implementation for Javascript. Does not perform checks on input data, but allows to rebuild original path segments from the result. To avoid errors, check first that your paths are made up of ASCII characters supported by the SVG 1.1 specification.

Install

npm install svg-path-segments

Documentation

Public API

const parsePath = require("svg-path-segments");

const segments = parsePath("M5 6 7 8l3 4z");
console.log(JSON.stringify(segments, null, 2));

[
  {
    "start": 0,
    "end": 4,
    "params": ["M", 5, 6],
    "chain": {
      "start": 0,
      "end": 8
    },
  },
  {
    "start": 5,
    "end": 8,
    "params": ["M", 7, 8],
    "chain": {
      "start": 0,
      "end": 8
    },
  },
  {
    "start": 8,
    "end": 12,
    "params": ["l", 3, 4],
  },
  {
    "start": 12,
    "end": 13,
    "params": ["z"],
  }
]

CLI

svg-path-segments --pretty "M5 6 7 8l3 4z"

Reference

# svgPathParse(d: string) ⇒ Segment[]

Returns the segments of the SVG path. The result is an array of objects, one per segment, which contain next properties:

• start (number): Index of the first character of the segment.
• end (number): Index of the first character after the segment. Note that you can use d.substring(result.start, result.end) to get the raw string representation of the segment.
• params (number[]): Parameters of the segment. The first parameter always is the command that draws the segment.
• chain (object?): If present, indicates that the segment is part of a chained set of segments.
  • start (number): Index of the first character of the chained set of segments to which the segment belongs.
  • end (number): Index of the first character after the chained set of segments to which the segment belongs. Note that you can use d.substring(result.chain.start, result.chain.end) to get the raw string representation of the chained set of segments to which the segment belongs.

Comparison against other implementations

	svg-path-segments	svgpath
Require	require("svg-path-segments")	require("svgpath/lib/path_parse")
Benchmark*	~46ms	~76ms
Absolutes	YES	NO
Segments indexing	YES	NO
Chained commands	YES	NO
Catmull-Rom curve commands (R/r)	NO	YES
Bearing commands (B/b)	NO	NO
First m converted to M	NO	YES
Chained M/m converted to L/l	NO	YES
Check path should start with m/M	NO	YES
Check bad command characters	NO	YES
Check missing parameters	NO	YES
Check leading zeros in numbers	NO	YES
Check arc flag 0 or 1	NO	YES
Check invalid float exponents	NO	YES
Unicode support	NO	PARTIAL

* Benchmarks are orientative, if you want to perform your own, see scripts/*-benchmark.js.

Usage with fontello/svgpath

const svgpath = require("svgpath");
const parsePath = require("svg-path-segments");

const segments = parsePath(iconPath);
const SVGPath = svgpath("");
SVGPath.segments = segments.map(segment => segment.params);