SVGPathCommander








!
image
A modern set of Typescript tools for manipulating the
d (description) attribute for
SVGPathElement items. The library is implementing modern JavaScript API to produce reusable path strings with lossless quality. In addition, you also have a powerful tool to convert other SVG shapes like
or
to
.
While you may find familiar tools inside, this library brings
new additions:
* the build in
getBBox,
getPointAtLength and
getTotalLength are more reliable and much more accurate than the native methods, not to mention their high
performance ratings;
* thanks to the community contributions we've implemented useful tools like
getPropertiesAtLength,
getSegmentOfPoint or
isPointInStroke;
a tool that can reverse path draw direction* without altering path commands, even with specific shorthand path commands;
a unique tool that can reverse path draw direction* for path strings with only 'C' path commands;
a new and unique tool to apply transform functions to path commands
via the modern DOMMatrix* API.
The key differences with other libraries:
* Typescript sourced with modernized codebase, all inherited codebase has been modernized as well;
* along with the modern codebase, the library also comes with strong TypeScript definitions;
* this library can create 3D to 2D projections, making your SVGs look like 3D but in the SVG coordinate system;
* you can use this library in both web apps and Node.js, you are not restricted to a single environment;
* path command transformations are all consistent with the SVG coordinates system, where others compute transform origin only for rotation transformation.
SVGPathCommander can use the
DOMMatrix API for
SVGPathElement path command transformation and implements a very fast and modernized
DOMMatrix shim.
There are a couple of good reasons for this implementation:
WebKitCSSMatrix
and SVGMatrix* APIs are slowly pushed away by DOMMatrix, the green light for new and modern implementations;
* we can actually apply a
3D transformation matrix to SVG path commands, by calculating a 2D projection of the actual shape in 3D coordinates;
* when most tools available will be rendered absolete, we are ready for new challenges.
This library is available on
CDN and
npm.
Install
``
npm install svg-path-commander
`
CDN
`
html