Fast Javascript SVG path parser
BSD-3-CLAUSE License
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.
npm install svg-path-segments
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"],
}
]
svg-path-segments --pretty "M5 6 7 8l3 4z"
# 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. Noted.substring(result.start, result.end)
to get the raw stringparams
(number[]): Parameters of the segment. The first parameter alwayschain
(object?): If present, indicates that the segment is part of astart
(number): Index of the first character of the chained set ofend
(number): Index of the first character after the chained set ofd.substring(result.chain.start, result.chain.end)
to get the raw stringsvg-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.
const svgpath = require("svgpath");
const parsePath = require("svg-path-segments");
const segments = parsePath(iconPath);
const SVGPath = svgpath("");
SVGPath.segments = segments.map(segment => segment.params);