svg-pathdata

Manipulate SVG path data (path[d] attribute content) simply and efficiently.

Usage

Install the module:

1npm install --save svg-pathdata

Then in your JavaScript files:

1import {
2  SVGPathData,
3  SVGPathDataTransformer,
4  SVGPathDataEncoder,
5  SVGPathDataParser,
6} from 'svg-pathdata';

Reading PathData

1const pathData = new SVGPathData(`
2  M 10 10
3  H 60
4  V 60
5  L 10 60
6  Z`);
7
8console.log(pathData.commands);
9
10// [  {type: SVGPathData.MOVE_TO,       relative: false,  x: 10,  y: 10},
11//    {type: SVGPathData.HORIZ_LINE_TO, relative: false,  x: 60},
12//    {type: SVGPathData.VERT_LINE_TO,  relative: false,          y: 60},
13//    {type: SVGPathData.LINE_TO,       relative: false,  x: 10,  y: 60},
14//    {type: SVGPathData.CLOSE_PATH}]

Reading PathData in chunks

1const parser = new SVGPathDataParser();
2
3parser.parse('   '); // returns []
4parser.parse('M 10'); // returns []
5parser.parse(' 10'); // returns [{type: SVGPathData.MOVE_TO, relative: false, x: 10, y: 10 }]
6
7parser.write('H 60'); // returns [{type: SVGPathData.HORIZ_LINE_TO, relative: false, x: 60 }]
8
9parser.write('V'); // returns []
10parser.write('60'); // returns [{type: SVGPathData.VERT_LINE_TO, relative: false, y: 60 }]
11
12parser.write('L 10 60 \n  Z');
13// returns [
14//   {type: SVGPathData.LINE_TO, relative: false, x: 10, y: 60 },
15//   {type: SVGPathData.CLOSE_PATH }]
16
17parser.finish(); // tell parser there is no more data: will throw if there are unfinished commands.

Outputting PathData

1const pathData = new SVGPathData(`
2  M 10 10
3  H 60
4  V 60
5  L 10 60
6  Z`);
7// returns "M10 10H60V60L10 60Z"
8
9encodeSVGPath({ type: SVGPathData.MOVE_TO, relative: false, x: 10, y: 10 });
10// returns "M10 10"
11
12encodeSVGPath({ type: SVGPathData.HORIZ_LINE_TO, relative: false, x: 60 });
13// returns "H60"
14
15encodeSVGPath([
16  { type: SVGPathData.VERT_LINE_TO, relative: false, y: 60 },
17  { type: SVGPathData.LINE_TO, relative: false, x: 10, y: 60 },
18  { type: SVGPathData.CLOSE_PATH },
19]);
20// returns "V60L10 60Z"

Transforming PathData

This library can perform transformations on SVG paths. Here is an example of that kind of use.

Transforming entire paths

1new SVGPathData(`
2   m 10,10
3   h 60
4   v 60
5   l 10,60
6   z`)
7  .toAbs()
8  .encode();
9// return s"M10,10 H70 V70 L80,130 Z"

Transforming partial data

Here, we take SVGPathData from stdin and output it transformed to stdout.

1const transformingParser = new SVGPathDataParser().toAbs().scale(2, 2);
2transformingParser.parse('m 0 0'); // returns [{ type: SVGPathData.MOVE_TO,       relative: false, x: 0, y: 0 }]
3transformingParser.parse('l 2 3'); // returns [{ type: SVGPathData.LINE_TO,       relative: false, x: 4, y: 6 }]

Supported transformations

You can find all supported transformations in src/SVGPathDataTransformer.ts. Additionally, you can create your own by writing a function with the following signature:

1type TransformFunction = (command: SVGCommand) => SVGCommand | SVGCommand[];
2
3function SET_X_TO(xValue = 10) {
4  return function(command) {
5    command.x = xValue; // transform command objects and return them
6    return command;
7  };
8};
9
10// Synchronous usage
11new SVGPathData('...')
12  .transform(SET_X_TO(25))
13  .encode();
14
15// Chunk usage
16new SVGPathDataParser().transform(SET_X_TO(25));

Contributing

Clone this project, run:

1npm install; npm test

Authors

• Nicolas Froidure
• Anders Kaseorg

License

MIT