https://github.com/mondeja/svg-path-bbox
SVG paths bounding box calculator
https://github.com/mondeja/svg-path-bbox
bbox path svg
Last synced: 6 months ago
JSON representation
SVG paths bounding box calculator
- Host: GitHub
- URL: https://github.com/mondeja/svg-path-bbox
- Owner: mondeja
- License: bsd-3-clause
- Created: 2020-05-15T19:03:11.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2025-03-03T17:00:44.000Z (7 months ago)
- Last Synced: 2025-03-28T14:17:27.958Z (7 months ago)
- Topics: bbox, path, svg
- Language: TypeScript
- Homepage: https://npmjs.com/package/svg-path-bbox
- Size: 1.09 MB
- Stars: 53
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 📦 svg-path-bbox
[![NPM version][npm-version-image]][npm-link]
[![License][license-image]][license-link]
[![NodeJS versions][npm-versions-image]][npm-link]
SVG paths bounding box calculator.
## Status
[![Tests][tests-image]][tests-link]
[![Coverage status][coveralls-image]][coveralls-link]
## Install
```sh
npm install svg-path-bbox
```
## Documentation
### Usage
```javascript
> import { svgPathBbox } from "svg-path-bbox";
> svgPathBbox("M5 10l2 3z")
[ 5, 10, 7, 13 ]
> svgPathBbox("M5 10c3 0 3 3 0 3z")
[ 5, 10, 7.25, 13 ]
```
Returned bounding box is an array made up like `viewBox` SVG attributes `[x0, y0, x1, y1]` of unrounded values:
### Command line
```bash
$ svg-path-bbox "M5 10c3 0 3 3 0 3z"
5 10 7.25 13
$ svg-path-bbox "M5 10c3 0 3 3 0 3z" "M2 8m5 5z"
5 10 7.25 13
2 8 7 13
```
### Typescript usage
```typescript
import { svgPathBbox } from "svg-path-bbox";
import type { BBox } from "svg-path-bbox";
const cases: [string, BBox][] = [["M0 0H3V6Z", [0, 0, 3, 6]]];
console.log(svgPathBbox(cases[0]));
```
### Reference
# **svgPathBbox**(d : _string_ | typeof import('svgpath')) ⇒ [minX: _number_, minY: _number_, maxX: _number_, maxY: _number_]
Computes the bounding box of SVG path following the [SVG 1.1 specification](https://www.w3.org/TR/SVG/paths.html).
- **d** (_string_ | typeof import('svgpath')) SVG path. Can be a string or a `SvgPath` interface from [svgpath].
## Thanks to
- [simple-icons/simple-icons](https://github.com/simple-icons/simple-icons) for reference dataset.
- [kpym/SVGPathy](https://github.com/kpym/SVGPathy) for reference implementation.
- [icons8/svg-path-bounding-box](https://github.com/icons8/svg-path-bounding-box) because [their bug](https://github.com/icons8/svg-path-bounding-box/issues/3) has been the source of this library.
- [mathandy/svgpathtools](https://github.com/mathandy/svgpathtools/) for reference implementation to compare with.
- [svgpath](https://www.npmjs.com/package/svgpath) as is used internally by svg-path-bbox to parse and transform paths before compute bounding boxes.
[npm-link]: https://www.npmjs.com/package/svg-path-bbox
[npm-version-image]: https://img.shields.io/npm/v/svg-path-bbox
[tests-image]: https://img.shields.io/github/actions/workflow/status/mondeja/svg-path-bbox/ci.yml?branch=master&logo=github&label=tests
[tests-link]: https://github.com/mondeja/svg-path-bbox/actions?query=workflow%3ATest
[coveralls-image]: https://coveralls.io/repos/github/mondeja/svg-path-bbox/badge.svg?branch=master
[coveralls-link]: https://coveralls.io/github/mondeja/svg-path-bbox?branch=master
[license-image]: https://img.shields.io/npm/l/svg-path-bbox?color=brightgreen
[license-link]: https://github.com/mondeja/svg-path-bbox/blob/master/LICENSE
[npm-versions-image]: https://img.shields.io/node/v/svg-path-bbox
[svgpath]: https://www.npmjs.com/package/svgpath