npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

pathinator

v0.4.3

Published

SVG path builder and minifier

Downloads

47

Readme

Pathinator

SVG path builder and minifier

npm build coverage deps size vulnerabilities license

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

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. |