pathinator
v0.4.3
Published
SVG path builder and minifier
Downloads
47
Maintainers
Readme
Pathinator
SVG path builder and minifier
Installation
npm install pathinator
optimizeSvgPaths(input, [settings]) ⇒ Promise.<(string|Document)>
Optimize all the paths in an svg file. Currently supports the
d
attribute in thepath
element and thepoints
attribute in bothpolygon
andpolyline
elements.
Returns: Promise.<(string|Document)> - Resolves with the optimized svg in the same format provided.
| Param | Type | Description | | --- | --- | --- | | input | string, Document | Can be the string content of an svg or a DOM Document. | | [settings] | object | See Path.export. Settings are applied to each path found in the svg. |
Example
import { optimizeSvgPaths } from 'pathinator';
const svg = document.querySelector('svg');
optimizeSvgPaths(svg, { compress: true })
.then((result) => {
// do something
});
Path
- Path
- new Path([path])
- .length ⇒ integer
- .import(path) ⇒ object
- .move(...args) ⇒ object
- .line(...args) ⇒ object
- .cubic(...args) ⇒ object
- .quadratic(...args) ⇒ object
- .arc(...args) ⇒ object
- .close([...args]) ⇒ object
- .update(index, values) ⇒ object
- .eachPoint(callback) ⇒ object
- .transform([settings]) ⇒ object
- .export([settings]) ⇒ Promise.<string>
new Path([path])
Parse, build, and optimize SVG path data.
| Param | Type | Description | | --- | --- | --- | | [path] | string | Optional path data to parse. |
Example
import { Path } from 'pathinator';
const path = new Path()
.move(50, 100)
.line(100, 100)
.line(200, 200)
.close();
path.length ⇒ integer
The total number of commands in this path.
path.import(path) ⇒ object 🔗 Chainable
Import a path string. Removes any previous commands and create a new one.
Returns: object - Returns this.
| Param | Type | Description | | --- | --- | --- | | path | string | A valid path data string or polygon string. |
path.move(...args) ⇒ object 🔗 Chainable
Add a move command.
Returns: object - Returns this.
| Param | Type | Description |
| --- | --- | --- |
| ...args | * | X and y coordinates or a string of X and y coordinates. If the final argument is true
then command will be absolute coordinates. |
path.line(...args) ⇒ object 🔗 Chainable
Add a line command.
Returns: object - Returns this.
| Param | Type | Description |
| --- | --- | --- |
| ...args | * | X and y coordinates or a string of X and y coordinates. If the final argument is true
then command will be absolute coordinates. |
path.cubic(...args) ⇒ object 🔗 Chainable
Add a quadratic bezier curve command.
Returns: object - Returns this.
| Param | Type | Description |
| --- | --- | --- |
| ...args | * | Series of coordinates or a string of coordinates. If the final argument is true
then command will be absolute coordinates. |
path.quadratic(...args) ⇒ object 🔗 Chainable
Add a quadratic bezier curve command.
Returns: object - Returns this.
| Param | Type | Description |
| --- | --- | --- |
| ...args | * | Series of coordinates or a string of coordinates. If the final argument is true
then command will be absolute coordinates. |
path.arc(...args) ⇒ object 🔗 Chainable
Add an arc command.
Returns: object - Returns this.
| Param | Type | Description |
| --- | --- | --- |
| ...args | * | Series of coordinates / values or a string of coordinates / values. If the final argument is true
then command will be absolute coordinates. |
path.close([...args]) ⇒ object 🔗 Chainable
Add a close command.
Returns: object - Returns this.
| Param | Type | Default | Description |
| --- | --- | --- | --- |
| [...args] | boolean | false | If the argument is true
then command will be absolute coordinates. |
path.update(index, values) ⇒ object 🔗 Chainable
Update command values at a specific index.
Returns: object - Returns this.
| Param | Type | Description | | --- | --- | --- | | index | integer | Index of the command to update. | | values | string, Array.<number> | New values for the command at this index. |
path.eachPoint(callback) ⇒ object 🔗 Chainable
Calls callback for each point in the path.
Returns: object - Returns this.
| Param | Type | Description | | --- | --- | --- | | callback | function | Provides three arguments: the Point, a boolean indicating if the point is a control point, and the command index. |
path.transform([settings]) ⇒ object 🔗 Chainable
Transform all commands in path.
Returns: object - Returns this.
| Param | Type | Default | Description | | --- | --- | --- | --- | | [settings] | object | | Optional settings object. | | [settings.fractionDigits] | integer | 3 | Round all numbers in path to a specified number of fraction digits. | | [settings.scale] | number, Point, Array, object | | Scale the entire path. If a number is provided then x and y are scaled the same. To scale x and y differently provide a Point, an array as [x, y], or an object as { x:, y: }. | | [settings.translate] | number, Point, Array, object | | Translate the entire string a specified distance. If a number is provided then x and y are translated the same. To translated x and y differently provide a Point, an array as [x, y], or an object as { x:, y: }. |
path.export([settings]) ⇒ Promise.<string>
Export a string of the path. Transforms are only applied to the exported path.
| Param | Type | Default | Description | | --- | --- | --- | --- | | [settings] | object | | Optional settings object. | | [settings.coordinates] | string | "initial" | Can be 'absolute' to convert all coordinates to absolute, 'relative' to convert all coordinates to relative, 'auto' to convert coordinates to whichever is the fewest characters, 'initial' (default) to retain the coordinates set on each command. | | [settings.compress] | boolean | false | Remove excess whitespace and unnecessary characters. | | [settings.combine] | boolean | true | Combine consecutive commands that are redundant. | | [settings.fractionDigits] | integer | 3 | Round all numbers in path to a specified number of fraction digits. | | [settings.scale] | number, Point, Array, object | | Scale the entire path. If a number is provided then x and y are scaled the same. To scale x and y differently provide a Point, an array as [x, y], or an object as { x:, y: }. | | [settings.translate] | number, Point, Array, object | | Translate the entire string a specified distance. If a number is provided then x and y are translated the same. To translated x and y differently provide a Point, an array as [x, y], or an object as { x:, y: }. | | [settings.maxCharsPerLine] | integer | | Add newlines at logical breaks in the path to improve readability. | | [settings.commandsOnNewLines] | boolean | false | Add a newline between each command. | | [settings.toPolygon] | boolean | false | Format the string for use in a polygon element. Sets coordinates to 'absolute'. | | [settings.async] | boolean | false | Process each command in a separate Promise. |