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

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

Changelog

5.0.3 (2020-02-04)

<a name="5.0.2"></a>