svg-path-bbox

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 | typeof import('svgpath')) ⇒ [minX: number, minY: number, maxX: number, maxY: number]

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

• d (string | typeof import('svgpath')) SVG path. Can be a string or a SvgPath interface from svgpath.

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.
• svgpath as is used internally by svg-path-bbox to parse and transform paths before compute bounding boxes.