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

svg-pathdata

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

Usage

Install the module:

npm install --save svg-pathdata

or add the bundle to a script in your HTML.

Then in your JavaScript files:

const {SVGPathData, SVGPathDataTransformer, SVGPathDataEncoder, SVGPathDataParser} = require('svg-pathdata');

With import syntax in TypeScript/ES6:

import {SVGPathData, SVGPathDataTransformer, SVGPathDataEncoder, SVGPathDataParser} from 'svg-pathdata';

Without modules, using the global in the bundle:

const {SVGPathData, SVGPathDataTransformer, SVGPathDataEncoder, SVGPathDataParser} = svgpathdata;

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 PathData in chunks

const parser = new SVGPathDataParser();

parser.parse('   '); // returns []
parser.parse('M 10'); // returns []
parser.parse(' 10'); // returns [{type: SVGPathData.MOVE_TO, relative: false, x: 10, y: 10 }]

parser.write('H 60'); // returns [{type: SVGPathData.HORIZ_LINE_TO, relative: false, x: 60 }]

parser.write('V'); // returns []
parser.write('60'); // returns [{type: SVGPathData.VERT_LINE_TO, relative: false, y: 60 }]

parser.write('L 10 60 \n  Z');
// returns [
//   {type: SVGPathData.LINE_TO, relative: false, x: 10, y: 60 },
//   {type: SVGPathData.CLOSE_PATH }]

parser.finish(); // tell parser there is no more data: will throw if there are unfinished commands.

Outputting PathData

const pathData = new SVGPathData (`
  M 10 10
  H 60
  V 60
  L 10 60
  Z`);
// returns "M10 10H60V60L10 60Z"

encodeSVGPath({ type: SVGPathData.MOVE_TO,       relative: false, x: 10, y: 10 });
// returns "M10 10"

encodeSVGPath({ type: SVGPathData.HORIZ_LINE_TO, relative: false, x: 60 });
// returns "H60"

encodeSVGPath([
  { type: SVGPathData.VERT_LINE_TO,  relative: false,        y: 60 },
  { type: SVGPathData.LINE_TO,       relative: false, x: 10, y: 60 },
  { type: SVGPathData.CLOSE_PATH}])
// 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

  new SVGPathData (`
   m 10,10
   h 60
   v 60
   l 10,60
   z`)
  .toAbs()
  .encode();
// return s"M10,10 H70 V70 L80,130 Z"

Transforming partial data

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

const transformingParser = new SVGPathDataParser().toAbs().scale(2, 2);
transformingParser.parse('m 0 0') // returns [{ type: SVGPathData.MOVE_TO,       relative: false, x: 0, y: 0 }]
transformingParser.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:

type TransformFunction = (command: SVGCommand) => SVGCommand | SVGCommand[];

function SET_X_TO(xValue = 10) {
  return function(command) {
    command.x = xValue; // transform command objects and return them
    return command;
  };
};

// Synchronous usage
new SVGPathData('...')
  .transform(SET_X_TO(25))
  .encode();

// Chunk usage
new SVGPathDataParser().transform(SET_X_TO(25));

Stats

Contributing

Clone this project, run:

npm install; npm test

License

MIT