mondeja / svg-path-bbox

SVG paths bounding box calculator

📦 svg-path-bbox

SVG paths bounding box calculator.

Status

Install

npm install svg-path-bbox

Documentation

Usage

> 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

$ 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

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) ⇒ [minX: number, minY: number, maxX: number, maxY: number]

Computes the bounding box of SVG path following the SVG 1.1 specification.

• d (string) SVG path.

Thanks to

• simple-icons/simple-icons for reference dataset.
• kpym/SVGPathy for reference implementation.
• icons8/svg-path-bounding-box because their bug has been the source of this library.
• mathandy/svgpathtools for reference implementation to compare with.

svg-path-bbox's Issues

feature request: does this repo support arc? such as M 1 1 A 2 2 45 1 1 2 3

Export 'svgPathBbox' function as default

TODO

• Update require statement in simple-icons linting.

Optimize segments order parsing using simple-icons data

Update Node.js versions in CI

Drop 10.x and 12.x and add 16.x. See Node.js releases lifecycle.

Impossible to build with TS

Hello i can't build my project i have this error :

error TS2307: Cannot find module 'svg-path-bbox' or its corresponding type declarations.
There are types at 'C:/Mes projets web/SIREC/sirec-web-app/node_modules/svg-path-bbox/dist/types.d.ts', but this result could not be resolved under your current 'moduleResolution' setting. Consider updating to 'node16', 'nodenext', or 'bundler'.

version :
"typescript": "^5.4.2",
"svg-path-bbox": "^1.2.6",
"vite": "^5.1.6",

ts config :

{
"compilerOptions": {
"baseUrl": ".",
"target": "ESNext",
"useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"paths": {
"@/": ["src/"]
}
},
"include": ["src", "node_modules/vite-plugin-pwa/client.d.ts", "global.d.ts"],
"references": [
{
"path": "./tsconfig.node.json"
}
]
}

Vite doesn't support anymore commonJS package, please help

Add browser UI based tests to compare results with browsers

Incorrect order of coordinates in readme docs

Hi, first of all thank you for this lib, it works perfectly, but in the readme you write that:
"The bounding box returned is an array made up in the same way of viewBox SVG attributes: [x0, x1, y0, y1]."
But in my tests svgPathBbox(path) actually returns coordinates in a bit different order: [x0, y0, x1, y1]

Dependency Dashboard

This issue contains a list of Renovate updates and their statuses.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• Update coverallsapp/github-action action to v1.1.3
• Update actions/setup-node action to v2.4.0
• Update dependency eslint to v7.32.0
• Update dependency simple-icons to v5.11.0
• Lock file maintenance

---

• Check this box to trigger a request for Renovate to run again on this repository

Calculating the boundary value of Q, sometimes the result is wrong

Thanks for the library, saved me a lot of time!
I found that when calculating the bounds of Q, sometimes the result is wrong and didn't find a reason for it
The test code is as follows

import svgPathBbox from "svg-path-bbox";
const testPath = "M90 100Q109 100 110 110L100 90";
const testPath1 = "M90 100Q101 100 110 110L100 90";
const testPath2 = "M90 100Q90 110 110 110L100 90";

const [minX, minY, maxX, maxY] = svgPathBbox(testPath);
const [minX1, minY1, maxX1, maxY1] = svgPathBbox(testPath1);
const [minX2, minY2, maxX2, maxY2] = svgPathBbox(testPath2);

console.log(minX, minY, maxX, maxY)
console.log(minX1, minY1, maxX1, maxY1)
console.log(minX2, minY2, maxX2, maxY2)

The output is as follows

90 90 110 100                                   
90 90 110 100                                   
90 90 100 110 

The result in all three cases should be 90,90, 110,100
Here's the schematic

How am I supposed to consume this module in a TypeScript project, with version 1.2.6?

First of all thanks for this project, I'm using it over at https://github.com/zengm-games/facesjs

If I upgrade to version 1.2.6, I noticed this error when running tsc:

src/faceToSvgString.ts:1:25 - error TS2307: Cannot find module 'svg-path-bbox' or its corresponding type declarations.

import svgPathBbox from "svg-path-bbox";

I tried playing around with my tsconfig.json settings. Initially I had this, which works with v1.2.5 or lower, but with v1.2.6 it leads to the error above:

    "moduleResolution": "node",

I also tried this:

    "moduleResolution": "NodeNext",
    "module": "NodeNext",

which leads to a different error:

node_modules/svg-path-bbox/dist/types.d.ts:9:1 - error TS2309: An export assignment cannot be used in a module with other exported elements.

export = svgPathBbox;

This does "work", although it's working by ignoring the error, which IMHO is not the ideal solution:

    "moduleResolution": "NodeNext",
    "module": "NodeNext",
    "skipLibCheck": true,

Do you have any recommendation for how I can get this to work, without enabling skipLibCheck?

Returns invalid bounding box

First of all, thanks for sharing this library. Clean and simple.

Working with your library, I noticed that it doesn't return the correct bounding box with some shapes.

In this case, the returned coordinates are as expected:
M 22.2076 22.2076 C 22.2076 22.2076 22.2076 22.2076 200.0000 0.0000 200.0000 0.0000 200.0000 0.0000 222.2076 222.2076 222.2076 222.2076 222.2076 222.2076 22.2076 222.2076 22.2076 222.2076 22.2076 222.2076 22.2076 22.2076
Returns:
[22.2076, 0, 222.2076, 222.2076]

But this very similar shape returns an invalid bounding box:
M 21.1456 21.1456 C 21.1456 21.1456 21.1456 21.1456 200.0000 0.0000 200.0000 0.0000 200.0000 0.0000 221.1456 221.1456 221.1456 221.1456 221.1456 221.1456 21.1456 221.1456 21.1456 221.1456 21.1456 221.1456 21.1456 21.1456
Returns:
[21.1456, 0, 221.1456, 256]

As you can see, the height is invalid.

Some more examples where the returned coordinates are incorrect:

Wrong y1:
M 3.9600 3.9600 C 3.9600 3.9600 3.9600 3.9600 200.0000 0.0000 200.0000 0.0000 200.0000 0.0000 203.9600 203.9600 203.9600 203.9600 203.9600 203.9600 3.9600 203.9600 3.9600 203.9600 3.9600 203.9600 3.9600 3.9600
Returns 3.96 0 203.96 256

Wrong y1:
M 59.5504 59.5504 C 59.5504 59.5504 59.5504 59.5504 200.0000 0.0000 200.0000 0.0000 200.0000 0.0000 259.5504 259.5504 259.5504 259.5504 259.5504 259.5504 59.5504 259.5504 59.5504 259.5504 59.5504 259.5504 59.5504 59.5504
Returns 59.550399999999996 0 259.5504 341.3333333333333

Wrong x0:
M 58.2684 58.2684 C 58.2684 58.2684 58.2684 58.2684 200.0000 0.0000 200.0000 0.0000 200.0000 0.0000 258.2684 258.2684 258.2684 258.2684 258.2684 258.2684 58.2684 258.2684 58.2684 258.2684 58.2684 258.2684 58.2684 58.2684
Returns 32 0 258.2684 258.2684

The package is not installable

When I run npm install svg-path-bbox I get an npm error:

npm ERR! code ENOENT
npm ERR! syscall chmod
npm ERR! path my-path\node_modules\svg-path-bbox\src\cli.cjs
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, chmod 'my-path\node_modules\svg-path-bbox\src\cli.cjs'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

I am using node v14.7

Add basic options to CLI

Add -h/--help and -v/--version options.

Incorrect bbox

Hello and thanks for this nice lib!

I've found a path that gives me different results in the browser and with svg-path-bbox.

svg-path-bbox gives me a width of 302.40999999999997

import svgPathBbox from "svg-path-bbox"
const path =
  "M436.79 417.31C435.89 415.01 438.59 410.91 439.69 409.31C439.89 408.91 439.69 408.41 439.39 408.31C438.09 407.41 435.19 404.71 435.09 401.61C434.99 399.71 437.39 396.41 438.49 394.91C439.19 393.71 437.69 393.11 437.09 392.31C435.69 390.81 433.99 388.31 434.09 385.71C434.19 382.71 436.69 379.51 440.79 377.01C440.89 376.91 440.99 376.71 440.89 376.61C439.79 374.91 439.29 374.01 439.19 371.41C438.99 367.91 440.79 364.81 444.19 362.41C446.59 360.81 449.89 359.81 452.79 359.21C452.79 359.01 452.79 349.41 452.79 348.21V348.01V340.21C452.79 340.01 452.69 339.91 452.49 339.91L209.89 340.21C209.69 340.21 209.59 340.31 209.59 340.51L209.69 896.1H452.49C452.69 896.1 452.79 896 452.79 895.8V420.31C449.79 421.41 446.59 422.11 444.19 422.11C440.79 422.01 437.69 419.51 436.79 417.31Z "
const bbox = svgPathBbox(path)
const width = bbox[2] - bbox[0]

console.log(width) // 302.40999999999997

But for the same path, chrome gives me a width or 243.20001220703125:

document.body.innerHTML = `
  <svg width="800" height='800'><path fill='black' d="M436.79 417.31C435.89 415.01 438.59 410.91 439.69 409.31C439.89 408.91 439.69 408.41 439.39 408.31C438.09 407.41 435.19 404.71 435.09 401.61C434.99 399.71 437.39 396.41 438.49 394.91C439.19 393.71 437.69 393.11 437.09 392.31C435.69 390.81 433.99 388.31 434.09 385.71C434.19 382.71 436.69 379.51 440.79 377.01C440.89 376.91 440.99 376.71 440.89 376.61C439.79 374.91 439.29 374.01 439.19 371.41C438.99 367.91 440.79 364.81 444.19 362.41C446.59 360.81 449.89 359.81 452.79 359.21C452.79 359.01 452.79 349.41 452.79 348.21V348.01V340.21C452.79 340.01 452.69 339.91 452.49 339.91L209.89 340.21C209.69 340.21 209.59 340.31 209.59 340.51L209.69 896.1H452.49C452.69 896.1 452.79 896 452.79 895.8V420.31C449.79 421.41 446.59 422.11 444.19 422.11C440.79 422.01 437.69 419.51 436.79 417.31Z"/></svg>
`
const bbox = document.querySelector('path').getBBox()

console.log(bbox.width) // 243.20001220703125