Calculate the Bounding Box of an SVG Element (JavaScript)

The SVGGraphicsElement.getBBox() method allows us to determine the coordinates of the smallest rectangle in which the object fits, its bounding box. The coordinates returned are with respect to the current SVG space (after the application of all geometry attributes on all the elements contained in the target element).

Note: getBBox() returns the actual bounding box at the time the method was called—even in case the element has not yet been rendered. It also does not account for any transformation applied to the element or its parents.

Note: getBBox returns different values than getBoundingClientRect(), as the latter returns value relative to the viewport.

Syntax

getBBox()
getBBox(OPTIONS)

Parameters (actually its attributes)

fill: A boolean value indicating that the fill should be included in the bounding box, defaults to true.
stroke: A boolean value indicating that the stroke should be included in the bounding box, defaults to false.
markers: A boolean value indicating that the markers should be included in the bounding box, defaults to false.
clipped: A boolean value indicating that the bounding box should be clipped, defaults to false.

Return value

The returned value is a SVGRect object, which defines the bounding box. This value is irrespective of any transformation attribute applied to it or the parent elements.

Example 01

Note: The SVG code and the JavaScript code are shown separately. For the JavaScript code to work, it must run after the SVG code has been loaded, that is it must be placed after the svg element in the body element of the document.

HTML:

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <g id="group_text_1">
    <text x="5" y="16" transform="scale(2, 2)">Hello World!</text>
    <text x="8" y="32" transform="translate(0 20) scale(1.25 1)">
      Hello World Again!
    </text>
  </g>
  <!-- Shows BBox in green -->
  <rect id="rect_1" stroke="#00ff00" stroke-width="3" fill="none"></rect>
  <!-- Shows BoundingClientRect in red -->
  <rect id="rect_2" stroke="#ff0000" stroke-width="3" fill="none"></rect>
</svg>

JavaScript:

const rectBBox = document.querySelector("#rect_1");
const rectBoundingClientRect = document.querySelector("#rect_2");
const groupElement = document.querySelector("#group_text_1");

const bboxGroup = groupElement.getBBox();
rectBBox.setAttribute("x", bboxGroup.x);
rectBBox.setAttribute("y", bboxGroup.y);
rectBBox.setAttribute("width", bboxGroup.width);
rectBBox.setAttribute("height", bboxGroup.height);

const boundingClientRectGroup = groupElement.getBoundingClientRect();
rectBoundingClientRect.setAttribute("x", boundingClientRectGroup.x);
rectBoundingClientRect.setAttribute("y", boundingClientRectGroup.y);
rectBoundingClientRect.setAttribute("width", boundingClientRectGroup.width);
rectBoundingClientRect.setAttribute("height", boundingClientRectGroup.height);

Click to view example!

`getBBox`

The getBBox method of object drawn in SVG allows us to determine the coordinates of the smallest rectangle (with sides parallel to the screen) in which the object fits. Specifically, getBBox accepts, as input, any SVG graphics element or group and returns a rectangle containing four attributes (the x and y of its upper leftmost corner, its height and its width).

For certain elements like rect or ellipse the properties of the bounding rectangle are trivial and obvious. For more complex entities like Bézier curves and text objects (where knowing how wide all the characters and the inter-character kerning would be rather complex to calculate), the getBBox method can save the programmer extensive effort.

As a simple example consider the following tag:

<text id="T" x="20" y="20" font-family="garamond" font-size="18">
Here is some text
</text>

The getBBox method is used as follows:

var Box=document.getElementById("T").getBBox()

After the above has been defined then the properties of the object variable Box are slightly different in three different browsers. In the test run, Box.y may was 4, 4.64 and -1!!! This is one very compelling reason for using this method, as opposed to hard-coding pre-calculated bounding box sizes.

It is worth noting that getBBox responds to original untransformed values of a drawn object. If an object has transformations applied (scale, rotate, or translate) then one must take those transforms into effect and apply them to the bounding box as well. See the example under getCTM later in this section.

A related function which should be used when viewports differ (e.g., when viewBox is used) is getScreenBBox.