Have ideas to improve npm?Join in the discussion! »

    svg-pathdata
    TypeScript icon, indicating that this package has built-in type declarations

    6.0.0 • Public • Published

    svg-pathdata

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

    NPM version Run tests Dependency Status devDependency Status Coverage Status Code Climate Dependency Status

    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

    NPM NPM

    Contributing

    Clone this project, run:

    npm install; npm test

    License

    MIT

    Install

    npm i svg-pathdata

    DownloadsWeekly Downloads

    391,117

    Version

    6.0.0

    License

    MIT

    Unpacked Size

    210 kB

    Total Files

    26

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar