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

Load script e.g via cdn

`

`

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

`

$3

`
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);

`

$3

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 , etc to elements to calculate extremes based on pathData. This method can't retrieve bbox values from 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)
``

$3

* multiple bboxes
* Test bbox calculation

$3

* Nikos M./foo123 for the algorhythm finding extermes on ellipses.
Check also this author's library "Geometrize"
* StackOverflow user @cuixiping for compiling and explaining the calculations for quadratic and cubic béziers and also the arc parametrisation
* obviously, Dmitry Baranovskiy – a lot of these helper functions originate either from Raphaël or snap.svg – or are at least heavily inspired by some helpers from these libraries
* Jarek Foksa for developping the great getPathData() polyfill – probably the most productive contributor to the "new" W3C SVGPathData interface draft.