nfroiduresvg-pathdata
Manipulate SVG path data (path[d] attribute content) simply and efficiently.
Usage
Install the module:
npm install --save svg-pathdata
Then in your JavaScript files:
import {
SVGPathData,
SVGPathDataTransformer,
SVGPathDataEncoder,
SVGPathDataParser,
} from 'svg-pathdata';
Reading PathData
const pathData = new SVGPathData(`
M 10 10
H 60
V 60
L 10 60
Z`);
console.log(pathData.commands);
// [ {type: SVGPathData.MOVE_TO, relative: false, x: 10, y: 10},
// {type: SVGPathData.HORIZ_LINE_TO, relative: false, x: 60},
// {type: SVGPathData.VERT_LINE_TO, relative: false, y: 60},
// {type: SVGPathData.LINE_TO, relative: false, x: 10, y: 60},
// {type: SVGPathData.CLOSE_PATH}]
Reading PathData in chunks
const parser = new SVGPathDataParser();
parser.parse(' '); // returns []
parser.parse('M 10'); // returns []
parser.parse(' 10'); // returns [{type: SVGPathData.MOVE_TO, relative: false, x: 10, y: 10 }]
parser.write('H 60'); // returns [{type: SVGPathData.HORIZ_LINE_TO, relative: false, x: 60 }]
parser.write('V'); // returns []
parser.write('60'); // returns [{type: SVGPathData.VERT_LINE_TO, relative: false, y: 60 }]
parser.write('L 10 60 \n Z');
// returns [
// {type: SVGPathData.LINE_TO, relative: false, x: 10, y: 60 },
// {type: SVGPathData.CLOSE_PATH }]
parser.finish(); // tell parser there is no more data: will throw if there are unfinished commands.
Outputting PathData
const pathData = new SVGPathData(`
M 10 10
H 60
V 60
L 10 60
Z`);
// returns "M10 10H60V60L10 60Z"
encodeSVGPath({ type: SVGPathData.MOVE_TO, relative: false, x: 10, y: 10 });
// returns "M10 10"
encodeSVGPath({ type: SVGPathData.HORIZ_LINE_TO, relative: false, x: 60 });
// returns "H60"
encodeSVGPath([
{ type: SVGPathData.VERT_LINE_TO, relative: false, y: 60 },
{ type: SVGPathData.LINE_TO, relative: false, x: 10, y: 60 },
{ type: SVGPathData.CLOSE_PATH },
]);
// returns "V60L10 60Z"
Transforming PathData
This library can perform transformations on SVG paths. Here is an example of that kind of use.
Transforming entire paths
new SVGPathData(`
m 10,10
h 60
v 60
l 10,60
z`)
.toAbs()
.encode();
// return s"M10,10 H70 V70 L80,130 Z"
Transforming partial data
Here, we take SVGPathData from stdin and output it transformed to stdout.
const transformingParser = new SVGPathDataParser().toAbs().scale(2, 2);
transformingParser.parse('m 0 0'); // returns [{ type: SVGPathData.MOVE_TO, relative: false, x: 0, y: 0 }]
transformingParser.parse('l 2 3'); // returns [{ type: SVGPathData.LINE_TO, relative: false, x: 4, y: 6 }]
Supported transformations
You can find all supported transformations in src/SVGPathDataTransformer.ts. Additionally, you can create your own by writing a function with the following signature:
type TransformFunction = (command: SVGCommand) => SVGCommand | SVGCommand[];
function SET_X_TO(xValue = 10) {
return function(command) {
command.x = xValue; // transform command objects and return them
return command;
};
};
// Synchronous usage
new SVGPathData('...')
.transform(SET_X_TO(25))
.encode();
// Chunk usage
new SVGPathDataParser().transform(SET_X_TO(25));
Contributing
Clone this project, run:
npm install; npm test
API
Functions
- annotateArcCommand()
https://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes Fixes rX and rY. Ensures lArcFlag and sweepFlag are 0 or 1 Adds center coordinates: command.cX, command.cY (relative or absolute, depending on command.relative) Adds start and end arc parameters (in degrees): command.phi1, command.phi2; phi1 < phi2 iff. c.sweepFlag == true
- intersectionUnitCircleLine()
Solves a quadratic system of equations of the form a x + b y = c x² + y² = 1 This can be understood as the intersection of the unit circle with a line. => y = (c - a x) / b => x² + (c - a x)² / b² = 1 => x² b² + c² - 2 c a x + a² x² = b² => (a² + b²) x² - 2 a c x + (c² - b²) = 0
- arePointsCollinear(p1, p2, p3) ⇒
Determines if three points are collinear (lie on the same straight line) and the middle point is on the line segment between the first and third points
- createEllipse()
Creates an ellipse path centered at (cx,cy) with radii rx and ry
- createRect()
Creates a rectangle path with optional rounded corners
- createPolyline()
Creates a polyline from an array of coordinates [x1,y1,x2,y2,...]
- createPolygon()
Creates a closed polygon from an array of coordinates
- REMOVE_COLLINEAR(commands) ⇒
Process a path and remove collinear points
- REVERSE_PATH(commands, preserveSubpathOrder) ⇒
Reverses the order of path commands to go from end to start IMPORTANT: This function expects absolute commands as input. It doesn't convert relative to absolute - use SVGPathDataTransformer.TO_ABS() first if needed.
annotateArcCommand()
https://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes Fixes rX and rY. Ensures lArcFlag and sweepFlag are 0 or 1 Adds center coordinates: command.cX, command.cY (relative or absolute, depending on command.relative) Adds start and end arc parameters (in degrees): command.phi1, command.phi2; phi1 < phi2 iff. c.sweepFlag == true
intersectionUnitCircleLine()
Solves a quadratic system of equations of the form a x + b y = c x² + y² = 1 This can be understood as the intersection of the unit circle with a line. => y = (c - a x) / b => x² + (c - a x)² / b² = 1 => x² b² + c² - 2 c a x + a² x² = b² => (a² + b²) x² - 2 a c x + (c² - b²) = 0
arePointsCollinear(p1, p2, p3) ⇒
Determines if three points are collinear (lie on the same straight line) and the middle point is on the line segment between the first and third points
Kind: global function
Returns: true if the points are collinear and p2 is on the segment p1-p3
| Param | Description |
|---|---|
| p1 | First point [x, y] |
| p2 | Middle point that might be removed |
| p3 | Last point [x, y] |
createEllipse()
Creates an ellipse path centered at (cx,cy) with radii rx and ry
createRect()
Creates a rectangle path with optional rounded corners
createPolyline()
Creates a polyline from an array of coordinates [x1,y1,x2,y2,...]
createPolygon()
Creates a closed polygon from an array of coordinates
REMOVE_COLLINEAR(commands) ⇒
Process a path and remove collinear points
Kind: global function
Returns: New array with collinear points removed
| Param | Description |
|---|---|
| commands | Array of SVG path commands to process (must be absolute) |
REVERSE_PATH(commands, preserveSubpathOrder) ⇒
Reverses the order of path commands to go from end to start IMPORTANT: This function expects absolute commands as input. It doesn't convert relative to absolute - use SVGPathDataTransformer.TO_ABS() first if needed.
Kind: global function
Returns: New SVG commands in reverse order with absolute coordinates
| Param | Description |
|---|---|
| commands | SVG path commands in absolute form to reverse |
| preserveSubpathOrder | If true, keeps subpaths in their original order |