svg-pathdata

What is svg-pathdata?

The svg-pathdata npm package is a powerful tool for parsing, manipulating, and serializing SVG path data. It allows developers to easily work with SVG path strings, converting them into a more manageable format, modifying their properties, and converting them back into strings. This package is particularly useful for applications that need to dynamically generate or alter SVG graphics.

What are svg-pathdata's main functionalities?

Parsing SVG Path Data

This feature allows you to parse a string containing SVG path data into a more manageable object format. This is useful for reading and manipulating individual commands within an SVG path.

"const {SVGPathData, SVGPathDataParser} = require('svg-pathdata');\nconst pathData = new SVGPathData('M10 10L90 90');"

Serializing SVG Path Data

After manipulating or generating SVG path data, this feature enables you to convert the path data back into a string format. This is essential for rendering the modified SVG graphics on the web.

"const {SVGPathData} = require('svg-pathdata');\nconst pathData = new SVGPathData('M10 10L90 90');\nconst serializedPath = pathData.encode();"

Transforming SVG Path Data

This feature provides a set of transformation functions (such as translate, rotate, scale) that can be applied to the path data. It's useful for dynamically altering the appearance of SVG graphics without manually recalculating path commands.

"const {SVGPathData, SVGPathDataTransformer} = require('svg-pathdata');\nconst pathData = new SVGPathData('M10 10L90 90').transform(SVGPathDataTransformer.translate(10, 20));"

Other packages similar to svg-pathdata

svgpath

Similar to svg-pathdata, svgpath provides tools for parsing and modifying SVG path data. It offers a fluent API for transforming paths (translate, rotate, scale, etc.). Compared to svg-pathdata, svgpath might be preferred for its chainable transformations, but it lacks some of the direct manipulation capabilities.

path-data-parser

This package focuses on parsing SVG path data into a more readable and manipulable array format. While it provides a solid parsing capability, it does not offer the extensive manipulation and serialization features found in svg-pathdata, making it more suitable for applications that primarily need to interpret path data.

README

svg-pathdata

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

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

const parser = new SVGPathData.Parser();
parser.on('data', console.log);

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 \n  Z');
// {type: SVGPathData.LINE_TO, relative: false, x: 10, y: 60 }
// {type: SVGPathData.CLOSE_PATH }

parser.end();

Outputting PathData

const pathData = new SVGPathData (`
  M 10 10
  H 60
  V 60
  L 10 60
  Z`);

console.log(pathData.encode());
// "M10 10H60V60L10 60Z"

Streaming PathData out

const encoder = new SVGPathData.Encoder();
encoder.setEncoding('utf8');

encode.on('data', 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"

encoder.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 all supported transformations in src/SVGPathDataTransformer.js. Additionally, you can create your own using this format:

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();

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

License

MIT