Package Exports

svg-pathdata

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (svg-pathdata) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

SVGPathData

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

Including the library

This library is fully node based (based on current stream implementation) but you can also use it in modern browsers with the browserified build or in your own build using Browserify.

Reading PathData

var pathData = new SVGPathData ('\
  M 10 10 \
  H 60 \
  V 60 \
  L 10 60 \
  Z \
');

console.log(pathData.commands);

// {"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

Contributing

Clone this project, run:

npm install; npm test

Build:

npm build