# svg-pathdata-getbbox

1.0.6 • Public • Published

# svg-pathdata-getbbox

Calculates a path bounding box based on its raw pathdata.

Some libraries fail at parsing all possible shorthand notations – most notably the (quite questionable) ability to concatenate the `A` arcto parameters `largeArc`, `sweep` – also with the final point:

``````A 5 10 45 1 0 40 20
``````

can also be expressed like so

``````A 5 10 45 10 40 20
``````

or even worse

``````A 5 10 45 1040 20
``````

... pretty hard to unravel – I don't blame anyone.

This script combines multiple non-iterative approaches to find extreme points for:

• `Q` quadratic béziers
• `C` cubic béziers
• `A` arc commands

Normalization doesn't convert quadratics or arcs to cubics.
All in all, this method should be quite fast and accurate.

## Usage - browser

``````<script src="https://cdn.jsdelivr.net/gh/herrstrietzel/svg-pathdata-getbbox@main/get-bbox.js"></script>
``````

Or minified version (7KB minified / 4KB gzipped)

``````<script src="https://cdn.jsdelivr.net/gh/herrstrietzel/svg-pathdata-getbbox@main/get-bbox.min.js"></script>
``````

### Example1: get BBox from path d attribute

``````let d = `
M3,7
L13,7
m-10,10
l10,0
V27
H23
v10
h10
C 33,43 38,47 43,47
c 0,5 5,10 10,10
S 63,67 63,67
s -10,10 10,10
Q 50,50 73,57
q 20,-5 0,-10
T 70,40
t 0,-15
A 5, 10 45 1040,20
a5,5 20 01 -10,-10
Z
`;

let bb = getBBoxFromD(d);
console.log(bb);

``````

### Example2: get BBox from element

This method actually queries all svg geometry elements within a target and sums up all bbox values to get the total bbox.
It also converts shapes like `<rect>`, `<circle>` etc to `<path>` elements to calculate extremes based on pathData. This method can't retrieve bbox values from `<text>` elements!

``````let bb = getBBoxFromEl(svg)
``````

## Usage - node.js

``````npm install svg-pathdata-getbbox
``````
``````var pathDataBB = require("svg-pathdata-getbbox");
var { getBBoxFromEl, getBBoxFromD, getPathDataBBox } = pathDataBB;

var d = `
M3,7
L13,7
m-10,10
l10,0
V27
H23
v10
h10
C 33,43 38,47 43,47
c 0,5 5,10 10,10
S 63,67 63,67
s -10,10 10,10
Q 50,50 73,57
q 20,-5 0,-10
T 70,40
t 0,-15
A 5, 10 45 1040,20
a5,5 20 01 -10,-10
Z
`;

var bb = getBBoxFromD(d);
console.log(bb)
``````

## Package Sidebar

### Install

`npm i svg-pathdata-getbbox`

### Repository

github.com/herrstrietzel/svg-pathdata-getbbox

### Homepage

github.com/herrstrietzel/svg-pathdata-getbbox

2

1.0.6

MIT

45 kB

7