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

svg-path-mini-tools

v0.2.6

Published

A collection of minimalistic SVG path manipulation utilities

Downloads

12

Readme

SVG Path Mini Tools

A collection of minimalistic SVG path manipulation utilities

Rationale

For a work project, I needed to scale paths without using on-the-fly transforms. I discovered that almost all SVG manipulation resources are either outdated (8-10 years old) or resemble feature-packed Swiss Army knives.

So, I began exploring the smallest solutions I could find. This exploration led me to create this compact package. It allows you to parse a path string, convert it to relative or absolute, and scale it.

It's less than 2K when minified, and it's fully tested and typed.

I'm confident that I'll discover more use cases in the future, leading to additional functionality. However, I'm committed to preventing this from becoming another bloated SVG library.

Usage

import {scalePath} from 'svg-path-mini-tools'
const scaled = scalePath('M20, 20 L40, 40 Z', 2, 2) // 'M20,20L40,40Z'

Methods

parse(path: string): array[]

Parses an SVG path data string.
Generates an array of commands where each command is an array of the form [command, arg1, arg2, ...].

serialize(segments: array[]): string

Converts parsed path data back into a string.

relative(path: array[]): array[]

Defines a path using relative points.
The input is an array of path commands, and the output is a similar array but with all points defined relative to the previous point.

absolute(path: array[]): array[]

Redefines a path with absolute coordinates.
The input is an array of path commands, and the output is a similar array but with all points defined in absolute terms.

scaleSegments(segments: array[], sx: number, sy: number): array[]

Scales the parsed path data by the given sx and sy factors.

scalePath(path: string, sx: number, sy: number): string

Scales an SVG path by the given sx and sy factors.
The input is a path string, and the output is a similar string but with all points scaled by the given factors.

License

MIT

Credits

Based on the work of @jkroso and @michaelrhodes

https://github.com/jkroso/serialize-svg-path
https://github.com/jkroso/parse-svg-path
https://github.com/jkroso/abs-svg-path
https://github.com/jkroso/rel-svg-path
and
https://github.com/michaelrhodes/scale-svg-path

Types Based on work from the DefinitelyTyped project

https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/abs-svg-path