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);