SVG Path Commander

A modern set of ES6+ JavaScript tools for manipulating the d (description) attribute for SVGPathElement items, and is implementing modern JavaScript API to produce reusable path strings with lossless quality.

While you may find familiar tools inside, this library brings new additions:

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:

ES6+ sourced with modernized codebase and build tools; all inherited codebase has been modernized as well;
you can use this library in both web apps and Node.js, where others are 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;
as you will see below, our library can create 3D to 2D projections, making your SVGs look like 3D but in the SVG coordinate system.

SVGPathCommander implements the DOMMatrix API for SVGPathElement path command transformation and falls back to a modernized CSSMatrix shim on older browsers as well as Node.js. 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

<script src="https://cdn.jsdelivr.net/npm/svg-path-commander/dist/svg-path-commander.min.js">

Quick Guide

import SVGPathCommander from 'svg-path-commander';

const path = 'M0 0 L50 100';

const flippedPath = new SVGPathCommander(path).flipX().toString();

WIKI

For developer guidelines, head over to the wiki pages.

What Is It For?

converting and optimizing SVGPathElement for use in third party application; our KUTE.js animation engine is using it to process SVGPathElement coordinates for SVG morphing and SVG cubic morphing;
animators that work with SVGs and need tools for performing specific path command processing;
font-icon creators can use it in both Node.js and web applications to process and test their creations.

ESLint

Some of the sources for the library recommend using the following ESLint rule:

rules: {
  // Disable bitwise for isArcCommand & isPathCommand
  "no-bitwise": 0,
}

Technical Considerations

as already mentioned, the optimize() method will not simplify/merge the path commands or determine and create shorthand notations; you might need SVGO and its convertPathData plugin; however, while computing path command values, the library will try to deliver the best outcome in path reverse or transformation;
all tools processing path segments will always round float values to 3 decimals; EG: 0.5666 => 0.566, 0.50 => 0.5; you can change the default option with SVGPathCommander.options.decimals = 2 or remove the value rounding all together with SVGPathCommander.options.round = 0; you can also control this feature via instance options;
the getSVGMatrix utility we developed will always compute the matrix by applying the transform functions in the following order: translate, rotate, skew and scale, which is the default composition/recomposition order specified in the W3C draft;
all 3d transformations as well as skews will convert A (arc) path commands to C (cubic bezier) due to the lack of resources on 3D to 2D projection;
most tools included with SVGPathCommander should work in your Node.js apps, but if you choose to use other complimentary 3rd party libraries, make sure you have the proper tools for them;
other path commands like R (catmulRomBezier), O, U (ellipse and shorthand ellipse) are not present in the current draft and they are not supported;
normalization can mean many things to many people and our library is developed to convert path command values to absolute and shorthand to non-shorthand commands to provide a solid foundation for the main processing tools of our library.

Special Thanks

Dmitry Baranovskiy for his Raphael.js
Vitaly Puzrin & Alex Kocharin for their SvgPath
Jürg Lehni & Jonathan Puckey for their Paper.js
Andrew Willems for his awesome guide
Mike 'Pomax' Kamermans for his awesome svg-path-reverse and bezierjs
Nicolas Debeissat for the inspiration on svg3d

License

SVGPathCommander is released under MIT Licence.

slothy / svg-path-commander