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