Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

svgpath

fontello1.7mMIT2.6.0TypeScript support: included

Low level toolkit for SVG paths transformations.

svg, path, transform, scale, translate, rotate, matrix

readme

svgpath

CI NPM version Coverage Status

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

Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

[2.6.0] - 2022-10-28

Changed

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

2.5.0 - 2022-01-11

Changed

  • Refactored .toString() to improve speed.

2.4.1 - 2022-01-03

Fixed

  • Fixed TS definition (regression in 2.4.0), #57.

2.4.0 - 2021-12-21

Changed

  • Updated TS definition, #56, #55.

2.3.1 - 2021-02-17

Changed

  • Updated TS definition.

2.3.0 - 2020-05-31

Added

  • Added SvgPath.from() method.

Changed

  • Dev deps bump.
  • Use nyc for coverage reports.

2.2.3 - 2020-01-19

Fixed

  • Fix arc flags parse (accept 0 or 1 only), #41.
  • Typo fix in error message.

2.2.2 - 2019-04-27

Changed

  • Dev deps bump.
  • Fix typescript definitions, #32.

2.2.1 - 2016-12-24

Changed

  • Update typescript definition for ts@2, #28.
  • Replace unicode characters with ascii ones, #27.

2.2.0 - 2016-09-11

Added

  • Added .skewX() & .skewY() shortcuts.
  • Added typescript definitions.

Changed

  • Dropped Makefile, use npm instead.
  • Deps bump & cleanup.

2.1.6 - 2016-03-09

Fixed

  • Fixed arc transforms for edge cases (precision + sweep flag), #23.

2.1.5 - 2016-01-03

Changed

  • Improved parser error messages.

2.1.4 - 2016-01-03

Fixed

  • More strict params count and exponent parse.
  • Properly correct round error on contour end.
  • Never drop empty arcs. Replace with lines to avoid collisions on S A S.

2.1.3 - 2015-12-30

Fixed

  • Fixed .unarc() - expand zero-radius arcs to lines.

2.1.2 - 2015-12-22

Fixed

  • Fixed arc transforms, #13. Thanks to @kpym.

2.1.1 - 2015-12-07

Fixed

  • Don't collapse M & m commands on output.

2.1.0 - 2015-10-27

Fixed

  • First m in path should be processed as absolute (M).
  • Don't force first M -> m on .rel().

2.0.0 - 2015-04-16

Changed

  • Unified transformations math.
  • Evaluate curried transforms lazily.
  • 100% tests coverage.
  • Minor optimisations & code refactoring.

Added

  • Added .matrix and .rotate().
  • Added .unarc() - convert arcs to curves.

Fixed

  • Fixed .unshort() - now relative commands processed too.
  • Fixed .round() - no more precision loss on relative coordinated.

1.0.7 - 2014-12-05

Changed

  • Parser rewrite (1.5x speedup).
  • Exposed .err property with text of error (empty on success).

1.0.6 - 2014-06-15

Changed

  • Maintenance release - docs & build scripts update.

1.0.5 - 2014-04-09

Added

  • Fixed line terminators handle in parser.

1.0.4 - 2014-03-14

Added

  • Added .transform() support.

1.0.3 - 2014-02-23

Changed

  • Parser rewrite (2x speed gain).
  • toString(): skip command name on repeaded sequences.
  • Added tests & benchmarks.

1.0.2 - 2013-12-03

Fixed

  • Fixed arcs roundung (missed type cast), by @kolya-ay.

1.0.1 - 2013-10-02

Fixed

  • Fixed params parse: 29.5.5 -> 29.5, 0.5.

1.0.0 - 2013-09-26

Changed

  • First release.