What is svg-pathdata?
The svg-pathdata npm package is a powerful tool for parsing, manipulating, and serializing SVG path data. It allows developers to easily work with SVG path strings, converting them into a more manageable format, modifying their properties, and converting them back into strings. This package is particularly useful for applications that need to dynamically generate or alter SVG graphics.
What are svg-pathdata's main functionalities?
Parsing SVG Path Data
This feature allows you to parse a string containing SVG path data into a more manageable object format. This is useful for reading and manipulating individual commands within an SVG path.
"const {SVGPathData, SVGPathDataParser} = require('svg-pathdata');\nconst pathData = new SVGPathData('M10 10L90 90');"
Serializing SVG Path Data
After manipulating or generating SVG path data, this feature enables you to convert the path data back into a string format. This is essential for rendering the modified SVG graphics on the web.
"const {SVGPathData} = require('svg-pathdata');\nconst pathData = new SVGPathData('M10 10L90 90');\nconst serializedPath = pathData.encode();"
Transforming SVG Path Data
This feature provides a set of transformation functions (such as translate, rotate, scale) that can be applied to the path data. It's useful for dynamically altering the appearance of SVG graphics without manually recalculating path commands.
"const {SVGPathData, SVGPathDataTransformer} = require('svg-pathdata');\nconst pathData = new SVGPathData('M10 10L90 90').transform(SVGPathDataTransformer.translate(10, 20));"
Other packages similar to svg-pathdata
svgpath
Similar to svg-pathdata, svgpath provides tools for parsing and modifying SVG path data. It offers a fluent API for transforming paths (translate, rotate, scale, etc.). Compared to svg-pathdata, svgpath might be preferred for its chainable transformations, but it lacks some of the direct manipulation capabilities.
path-data-parser
This package focuses on parsing SVG path data into a more readable and manipulable array format. While it provides a solid parsing capability, it does not offer the extensive manipulation and serialization features found in svg-pathdata, making it more suitable for applications that primarily need to interpret path data.
svg-pathdata
Manipulate SVG path data (path[d] attribute content) simply and efficiently.
Usage
Install the module:
npm install --save svg-pathdata
or add the bundle to a script in your HTML.
Then in your JavaScript files:
const {SVGPathData, SVGPathDataTransformer, SVGPathDataEncoder, SVGPathDataParser} = require('svg-pathdata');
With import syntax in TypeScript/ES6:
import {SVGPathData, SVGPathDataTransformer, SVGPathDataEncoder, SVGPathDataParser} from 'svg-pathdata';
Without modules, using the global in the bundle:
const {SVGPathData, SVGPathDataTransformer, SVGPathDataEncoder, SVGPathDataParser} = svgpathdata;
Reading PathData
const pathData = new SVGPathData (`
M 10 10
H 60
V 60
L 10 60
Z`);
console.log(pathData.commands);
Reading streamed PathData
const parser = new SVGPathDataParser();
parser.on('data', console.log);
parser.write(' ');
parser.write('M 10');
parser.write(' 10');
parser.write('H 60');
parser.write('V');
parser.write('60');
parser.write('L 10 60 \n Z');
parser.end();
Outputting PathData
const pathData = new SVGPathData (`
M 10 10
H 60
V 60
L 10 60
Z`);
console.log(pathData.encode());
Streaming PathData out
const encoder = new SVGPathDataEncoder();
encoder.setEncoding('utf8');
encode.on('data', console.log(str));
encoder.write({ type: SVGPathData.MOVE_TO, relative: false, x: 10, y: 10 });
encoder.write({ type: SVGPathData.HORIZ_LINE_TO, relative: false, x: 60 });
encoder.write({ type: SVGPathData.VERT_LINE_TO, relative: false, y: 60 });
encoder.write({ type: SVGPathData.LINE_TO, relative: false, x: 10, y: 60 });
encoder.write({ type: SVGPathData.CLOSE_PATH});
encoder.end();
Transforming PathData
This library was made to live decoding/transform/encoding SVG PathData. Here is
an example of that kind of use.
The synchronous way
console.log(
new SVGPathData (`
m 10,10
h 60
v 60
l 10,60
z`)
.toAbs()
.encode()
);
The streaming/asynchronous way
Here, we take SVGPathData from stdin and output it transformed to stdout.
process.stdin.pipe(new SVGPathDataParser())
.pipe(new SVGPathDataTransformer(SVGPathData.Transformer.TO_ABS()))
.pipe(new SVGPathDataEncoder())
.pipe(process.stdout);
Supported transformations
You can find all supported transformations in
src/SVGPathDataTransformer.js.
Additionally, you can create your own using this format:
function SET_X_TO(xValue = 10) {
return function(command) {
command.x = xValue;
return command;
};
};
new SVGPathData('...')
.transform(SET_X_TO(25))
.encode();
process.stdin.pipe(new SVGPathDataParser())
.pipe(new SVGPathDataTransformer(SET_X_TO(25)))
.pipe(new SVGPathDataEncoder())
.pipe(process.stdout);
Stats
Contributing
Clone this project, run:
npm install; npm test
License
MIT