svgpath

What is svgpath?

The svgpath npm package is a tool for transforming and manipulating SVG path data. It allows you to perform various operations such as scaling, translating, rotating, and more on SVG path strings.

What are svgpath's main functionalities?

Scaling

This feature allows you to scale the SVG path data. In the example, the path is scaled by a factor of 2 in both the x and y directions.

const svgpath = require('svgpath');
const pathData = 'M10 10 H 90 V 90 H 10 Z';
const scaledPath = svgpath(pathData).scale(2, 2).toString();
console.log(scaledPath);

Translating

This feature allows you to translate (move) the SVG path data. In the example, the path is moved 10 units to the right and 20 units down.

const svgpath = require('svgpath');
const pathData = 'M10 10 H 90 V 90 H 10 Z';
const translatedPath = svgpath(pathData).translate(10, 20).toString();
console.log(translatedPath);

Rotating

This feature allows you to rotate the SVG path data. In the example, the path is rotated by 45 degrees.

const svgpath = require('svgpath');
const pathData = 'M10 10 H 90 V 90 H 10 Z';
const rotatedPath = svgpath(pathData).rotate(45).toString();
console.log(rotatedPath);

Matrix Transformation

This feature allows you to apply a matrix transformation to the SVG path data. In the example, a transformation matrix is applied to the path.

const svgpath = require('svgpath');
const pathData = 'M10 10 H 90 V 90 H 10 Z';
const matrixTransformedPath = svgpath(pathData).matrix([1, 0, 0, 1, 30, 30]).toString();
console.log(matrixTransformedPath);

Converting to Absolute Coordinates

This feature allows you to convert relative coordinates in the SVG path data to absolute coordinates. In the example, the relative commands are converted to absolute commands.

const svgpath = require('svgpath');
const pathData = 'M10 10 h 80 v 80 h -80 Z';
const absolutePath = svgpath(pathData).abs().toString();
console.log(absolutePath);

Other packages similar to svgpath

svg-transform

The svg-transform package provides similar functionalities for transforming SVG path data, including scaling, translating, and rotating. It is more focused on applying transformations directly to SVG elements rather than just path data.

svg-path-parser

The svg-path-parser package is used for parsing SVG path data into a more manipulable format. While it doesn't provide transformation functions directly, it can be used in conjunction with other libraries to achieve similar results.

path-data-polyfill

The path-data-polyfill package provides a polyfill for the SVGPathElement API, allowing you to manipulate SVG path data using native browser methods. It is useful for environments where the native API is not available.

README

svgpath

Low level toolkit for SVG paths transformations. Sometimes you can't use transform attributes and have to apply changes to svg paths directly. Then this package is for you :) !

Note: this package works with path data strings, not with full svg xml sources.

Install

npm install svgpath

Example

var svgpath = require('svgpath');

var transformed = svgpath(__your_path__)
                    .scale(0.5)
                    .translate(100,200)
                    .rel()
                    .round(1)
                    .toString();

API

All methods are chainable (return self).

new SvgPath(path) -> self

Constructor. Creates new SvgPath class instance with chainable methods. new can be omited.

SvgPath.from(path|SvgPath) -> self

Similar to Array.from(). Creates SvgPath instance from string or another instance (data will be cloned).

.abs() -> self

Converts all path commands to absolute.

.rel() -> self

Converts all path commands to relative. Useful to reduce output size.

.scale(sx [, sy]) -> self

Rescale path (the same as SVG scale transformation). sy = sx by default.

.translate(x [, y]) -> self

Rescale path (the same as SVG translate transformation). y = 0 by default.

.rotate(angle [, rx, ry]) -> self

Rotate path to angle degrees around (rx, ry) point. If rotation center not set, (0, 0) used. The same as SVG rotate transformation.

.skewX(degrees) -> self

Skew path along the X axis by degrees angle.

.skewY(degrees) -> self

Skew path along the Y axis by degrees angle.

.matrix([ m1, m2, m3, m4, m5, m6 ]) -> self

Apply 2x3 affine transform matrix to path. Params - array. The same as SVG matrix transformation.

.transform(string) -> self

Any SVG transform or their combination. For example rotate(90) scale(2,3). The same format, as described in SVG standard for transform attribute.

.unshort() -> self

Converts smooth curves T/t/S/s with "missed" control point to generic curves (Q/q/C/c).

.unarc() -> self

Replaces all arcs with bezier curves.

.toString() -> string

Returns final path string.

.round(precision) -> self

Round all coordinates to given decimal precision. By default round to integer. Useful to reduce resulting output string size.

.iterate(function(segment, index, x, y) [, keepLazyStack]) -> self

Apply iterator to all path segments.

• Each iterator receives segment, index, x and y params. Where (x, y) - absolute coordinates of segment start point.
• Iterator can modify current segment directly (return nothing in this case).
• Iterator can return array of new segments to replace current one ([] means that current segment should be delated).

If second param keepLazyStack set to true, then iterator will not evaluate stacked transforms prior to run. That can be useful to optimize calculations.

Support svgpath

You can support this project via Tidelift subscription.

Changelog

[2.6.0] - 2022-10-28

Changed

• For broken paths return valid part instead of discard all, #60.