/svg-pathdata-getbbox

Calculate a path bounding box based on its pathdata

Primary LanguageJavaScript

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

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

Examples

Credits