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 the path element and the points attribute in both polygon and polyline 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.