Skip to main content

extendViewBox()

Part of the @remotion/paths package. Available since v3.2.25

Widens an SVG viewBox in all directions by a certain scale factor.

note

This function may be unnecessary: If you want the parts that go outside of the viewbox to be visible, you can also set style={{overflow: 'visible'}} on the SVG container.

tsx
import { extendViewBox } from "@remotion/paths";
 
const extended = extendViewBox("0 0 1000 1000", 2);
console.log(extended); // "-500 -500 2000 2000"
tsx
import { extendViewBox } from "@remotion/paths";
 
const extended = extendViewBox("0 0 1000 1000", 2);
console.log(extended); // "-500 -500 2000 2000"

The function will throw if the viewBox is invalid.

Example: Displaying an SVG path that goes out of bounds​

Consider the following SVG:

The path will go from 0 to 1500 on the horizontal axis, but it will be cut off because it goes beyond the viewport area.

tsx
const viewBox = "0 0 1000 1000";
 
export const ViewBoxExample: React.FC = () => {
  return (
    <svg viewBox={viewBox}>
      <path d={"0 500 1500 500"} stroke="black" strokeWidth={4} />
    </svg>
  );
};
tsx
const viewBox = "0 0 1000 1000";
 
export const ViewBoxExample: React.FC = () => {
  return (
    <svg viewBox={viewBox}>
      <path d={"0 500 1500 500"} stroke="black" strokeWidth={4} />
    </svg>
  );
};

We can fix the cutoff by doing two things:

  • Scaling the viewBox by a factor of 2
  • Applying a 2x scale transform to the SVG.
tsx
import { extendViewBox } from "@remotion/paths";
 
const viewBox = "0 0 1000 1000";
 
export const ViewBoxExample: React.FC = () => {
  return (
    <svg style={{ scale: "2" }} viewBox={extendViewBox(viewBox, 2)}>
      <path d={"0 500 1500 500"} stroke="black" strokeWidth={4} />
    </svg>
  );
};
tsx
import { extendViewBox } from "@remotion/paths";
 
const viewBox = "0 0 1000 1000";
 
export const ViewBoxExample: React.FC = () => {
  return (
    <svg style={{ scale: "2" }} viewBox={extendViewBox(viewBox, 2)}>
      <path d={"0 500 1500 500"} stroke="black" strokeWidth={4} />
    </svg>
  );
};

By doing that, the each dimensions of the viewBox will be doubled, which will result in the picture being scaled down. By applying a scale transform, this can be corrected.

In this example, a factor of 2 was chosen because it is enough to fix the cutoff problem. The more the SVG path goes outside the container, the higher the factor needs to be to compensate.

See also​