Svg-path-editor-lib

The library powering the SvgPathEditor app.

Usage

Parse path

import { SvgPath } from 'svg-path-editor-lib';

// Throw an error if path is invalid
const parsedPath = new SvgPath(path);

Generate path

parsedPath.asString(
    decimals,       // default `4`
    minifyOutput    // default `false`
)

Global operations

All operations are performed in place.

Scale:

parsedPath.scale(x, y);

Translate:

parsedPath.translate(x, y);

Rotate:

parsedPath.rotate(x, y, angle);

Convert to relative:

parsedPath.setRelative(true);

Convert to absolute:

parsedPath.setRelative(false);

Reverse:

import { reversePath } from 'svg-path-editor-lib';
reversePath(parsedPath);

Change origin:

import { changePathOrigin } from 'svg-path-editor-lib';
changePathOrigin(parsedPath, indexOfNewOrigin);

Advanced optimizations:

import { optimizePath } from 'svg-path-editor-lib';
optimizePath(parsedPath, {
  removeUselessCommands,         // default `false`
  useShorthands,                 // default `false`
  useHorizontalAndVerticalLines, // default `false`
  useRelativeAbsolute,           // default `false`
  useReverse,                    // default `false`
  removeOrphanDots,              // default `false`, may be destructive for stroked paths
  useClosePath,                  // default `false`, may be destructive for stroked paths
});

Local operations

Use parsedPath.path to get an array of all path items.

const item = parsedPath.path[0];

Insert after:

// Insert a the end:
parsedPath.insert(SvgItem.Make(['M', '1', '1']));
// Insert after `item`:
parsedPath.insert(SvgItem.Make(['M', '1', '1']), item);

Modify item:

item.values[index] = val;
parsedPath.refreshAbsolutePositions();

Convert to relative:

item.setRelative(true);

Convert to absolute:

item.setRelative(false);

Convert to another type:

parsedPath.changeType(item, 'L');

Remove item:

parsedPath.delete(item);