node package manager

svg-pathdata

svg-pathdata

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

NPM version Build status Dependency Status devDependency Status Coverage Status Code Climate Dependency Status

Usage

Install the module:

npm install --save svg-pathdata

Then in your JavaScript files:

const SVGPathData = require('svg-pathdata');

Reading PathData

const pathData = new SVGPathData (`
  M 10 10
  H 60
  V 60
  L 10 60
  Z`);
 
 
console.log(pathData.commands);
 
 
// [  {type: SVGPathData.MOVE_TO,       relative: false,  x: 10,  y: 10}, 
//    {type: SVGPathData.HORIZ_LINE_TO, relative: false,  x: 60}, 
//    {type: SVGPathData.VERT_LINE_TO,  relative: false,          y: 60}, 
//    {type: SVGPathData.LINE_TO,       relative: false,  x: 10,  y: 60}, 
//    {type: SVGPathData.CLOSE_PATH}] 

Reading streamed PathData

var parser = new SVGPathData.Parser();
parser.on('data', function(cmd) {
  console.log(cmd);
});
 
parser.write('   ');
parser.write('M 10');
parser.write(' 10');
 
// { 
//   "type": SVGPathData.MOVE_TO, 
//   "relative": false, 
//   "x": 10, "y": 10 
// } 
 
 
parser.write('H 60');
 
// { 
//   "type": SVGPathData.HORIZ_LINE_TO, 
//   "relative": false, 
//   "x": 60 
// } 
 
 
parser.write('V');
parser.write('60');
 
// { 
//   "type": SVGPathData.VERT_LINE_TO, 
//   "relative": false, 
//   "y": 60 
// } 
 
 
parser.write('L 10 60 \
  Z');
 
// { 
//   "type": SVGPathData.LINE_TO, 
//   "relative": false, 
//   "x": 10, 
//   "y": 60 
// } 
 
// { 
//   "type": SVGPathData.CLOSE_PATH 
// } 
 
parser.end();

Outputting PathData

var pathData = new SVGPathData (`
  M 10 10
  H 60
  V 60
  L 10 60
  Z`);
 
console.log(pathData.encode());
// "M10 10H60V60L10 60Z" 

Streaming PathData out

var encoder = new SVGPathData.Encoder();
encoder.setEncoding('utf8');
 
encode.on('data', function(str) {
  console.log(str);
});
 
encoder.write({
   "type": SVGPathData.MOVE_TO,
   "relative": false,
   "x": 10, "y": 10
 });
// "M10 10" 
 
encoder.write({
   "type": SVGPathData.HORIZ_LINE_TO,
   "relative": false,
   "x": 60
});
// "H60" 
 
encoder.write({
   "type": SVGPathData.VERT_LINE_TO,
   "relative": false,
   "y": 60
});
// "V60" 
 
encoder.write({
   "type": SVGPathData.LINE_TO,
   "relative": false,
   "x": 10,
   "y": 60
});
// "L10 60" 
 
encoder.write({"type": SVGPathData.CLOSE_PATH});
// "Z" 
 
encode.end();

Transforming PathData

This library was made to live decoding/transform/encoding SVG PathData. Here is an example of that kind of use.

The synchronous way

console.log(
  new SVGPathData ('\
   m 10,10 \
   h 60 \
   v 60 \
   l 10,60 \
   z'
  )
  .toAbs()
  .encode()
);
// "M10,10 H70 V70 L80,130 Z" 

The streaming/asynchronous way

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

// stdin to parser 
process.stdin.pipe(new SVGPathData.Parser())
// parser to transformer to absolute 
  .pipe(new SVGPathData.Transformer(SVGPathData.Transformer.TO_ABS))
// transformer to encoder 
  .pipe(new SVGPathData.Encoder())
// encoder to stdout 
  .pipe(process.stdout);

Supported transformations

You can find every supported transformations in this file of course, you can create yours by using this format:

function SET_X_TO(xValue) {
  xValue = xValue || 10; // Provide default values or throw errors for options 
  function(command) {
    command.x = xValue; // transform command objects and return them 
    return command;
  };
};
 
// Synchronous usage 
new SVGPathData('...')
  .transform(SET_X_TO, 25)
  .encode();
 
// Streaming usage 
process.stdin.pipe(new SVGPathData.Parser())
  .pipe(new SVGPathData.Transformer(SET_X_TO, 25))
  .pipe(new SVGPathData.Encoder())
  .pipe(process.stdout);

Stats

NPM NPM

Contributing

Clone this project, run:

npm install; npm test

License

MIT