Skip to main content

getBoundingBox()

Part of the @remotion/paths package. Available from v3.3.40

Returns the bounding box of the given path, suitable for calculating the viewBox value that you need to pass to an SVG.

The bounding box is the smallest rectangle which can contain the shape in full.

get-bounding-box.ts
tsx
import { getBoundingBox } from "@remotion/paths";
 
const boundingBox = getBoundingBox(
  "M 35,50 a 25,25,0,1,1,50,0 a 25,25,0,1,1,-50,0"
);
// { x1: 35, x2: 85, y1: 24.999999999999993, y2: 75 };
get-bounding-box.ts
tsx
import { getBoundingBox } from "@remotion/paths";
 
const boundingBox = getBoundingBox(
  "M 35,50 a 25,25,0,1,1,50,0 a 25,25,0,1,1,-50,0"
);
// { x1: 35, x2: 85, y1: 24.999999999999993, y2: 75 };

This function will throw if the SVG path is invalid.

Return type​

Includes the following properties:

  • x1: The leftmost x coordinate of the bounding box
  • x2: The rightmost x coordinate of the bounding box
  • y1: The topmost y coordinate of the bounding box
  • y2: The bottommost y coordinate of the bounding box
  • width: The width of the bounding box, returned from v3.3.97
  • height: The height of the bounding box, returned from v3.3.97
  • viewBox: The viewBox value that you can pass to an SVG, returned from v3.3.97

BoundingBox type​

In TypeScript, you can get the shape of the return value by importing the BoundingBox type:

ts
import type { BoundingBox } from "@remotion/paths";
ts
import type { BoundingBox } from "@remotion/paths";

See also​