JavaScript API

Instance Methods

The SVGPathCommander construct comes with instance methods you can call, intuitive and easy to use:

• .toAbsolute() - will convert all path commands of a SVGPathElement with or without sub-path to absolute values; the absolute path is used by all other tools for specific processing;
• .toRelative() - will convert all path commands of a shape with or without sub-path to relative values;
• .reverse(onlySubpath) - will reverse the shape draw direction by changing the order of all path segments and their coordinates; when the onlySubpath option is true, it will only reverse the draw direction of subpath shapes
• .normalize() - will convert path command values to absolute and convert shorthand S, T, H, V to C, Q and L respectivelly;
• .optimize() - will compute two pathArrays one with absolute and the other with relative values, then update the pathArray segments using the values that convert to shortest string;
• .transform(transformObject) - will normalize all path commands and apply a 2D transformation matrix to all path commands;
• .flipX() - will call the above transform() method to apply a 180deg rotation on the X axis;
• .flipY() - will call the above transform() method to apply a 180deg rotation on the Y axis;
• .toString() - will return the pathString of the current pathArray stored in the instance.segments object.

Instance Options

• round Number | Boolean - option to enable/disable value rounding for the processing output; the default value is TRUE
• origin [Number, Number, Number] - option to set a transform origin for transformations; if not provided, the script will compute the shape pathBBox and set this option to 50% 50% 100% values of the shape width height width values of the pathBBox

Static Methods

When using the distribution files, type in "SVGPathCommander." in your browser console and have a look, there are a wide range of tools to play with. Here are some notable utilities:

• SVGPathCommander.isValidPath(pathString) - checks if a path string is valid;
• SVGPathCommander.shapeToPath(element, replace) - returns a new <path> element from the attributes of a <line>, <polyline>, <polygon>, <rect>, <ellipse>, <circle> or <glyph>; the newly create <path> element keeps all non-specific attributes like class, fill, etc.; when the replace parameter is true, it will replace the target element;
• SVGPathCommander.parsePathString(pathString) - returns a pathArray which is used by all of SVGPathCommander processing tools;
• SVGPathCommander.pathToAbsolute(pathString|pathArray) - returns a new pathArray having all path commands as absolute coordinates;
• SVGPathCommander.pathToRelative(pathString|pathArray) - returns a new pathArray having all path commands as relative coordinates;
• SVGPathCommander.pathToCurve(pathString|pathArray) - returns a new pathArray having all path commands converted to cubicBezier (C) and absolute values;
• SVGPathCommander.pathToString(pathArray) - converts any pathArray to string and returns it;
• SVGPathCommander.clonePath(pathArray) - returns a deep clone of a pathArray, which is the result of any of the above functions;
• SVGPathCommander.roundPath(pathArray, decimals) - returns a new pathArray with all float path command values rounded to 3 decimals by default, or provide a number to be used as the amount of decimals to round values to;
• SVGPathCommander.reversePath(pathString|pathArray) - returns a new pathArray with all path commands having absolute values and in reverse order, but only for a single M->Z shape, for paths having sub-path(s) you need to use the SVGPathCommander constructor itself;
• SVGPathCommander.optimizePath(pathArray) - returns a new pathArray with all segments that have the shortest strings from either absolute or relative pathArray segments;
• SVGPathCommander.transformPath(pathArray,transformObject) - returns a new pathArray with all segments transformed according to the properties defined in the transformObject;
• SVGPathCommander.normalizePath(pathString|pathArray) - returns a new pathArray with all shorthand path command segments such as S, T are converted to C and Q respectively, V and H to L, all in absolute values; the utility is used by pathToCurve and reversePath;
• SVGPathCommander.getDrawDirection(pathArray) - converts the pathArray to curve and returns TRUE if a shape draw direction is clockwise, it should work for shapes with sub-paths, but it might skew your results, so make sure you split your path and test each subpath separatelly;
• SVGPathCommander.getPathBBox(pathArray) - converts the pathArray to curve and returns the bounding box of a shape in the form of the following object: {x1,y1, x2,y2, width,height, cx,cy}, where cx & cy are the shape's center point; for faster processing, you might want to split the path with subpaths and return the bounding box you know is the largest;
• SVGPathCommander.getPathLength(pathArray) - converts the pathArray to curve and returns the total length of the shape; this is equivalent to SVGPathElement.prototype.getTotalLength() and should work in Node.js;
• SVGPathCommander.getPointAtLength(pathArray) - converts the pathArray to curve and looks into each segment and returns an {x,y} object;
• SVGPathCommander.splitPath(pathString) - returns an Array of sub-path strings.