Skip to content

mondeja/svg-path-bbox

Repository files navigation

📦 svg-path-bbox

NPM version License NodeJS versions

SVG paths bounding box calculator.

Status

Tests Coverage 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