How Browsers Calculate SVG Intrinsic Dimensions

Web browsers determine the intrinsic dimensions of an unconstrained Scalable Vector Graphics (SVG) element by evaluating its width, height, and viewBox attributes according to the CSS Images and SVG specifications. When external CSS properties do not explicitly force a size, the rendering engine combines these attributes to calculate three key metrics: intrinsic width, intrinsic height, and intrinsic aspect ratio. Understanding how browsers resolve these properties helps avoid layout shifts and rendering inconsistencies across different contexts.

The Role of SVG Attributes

Browsers extract geometric data from three primary attributes located on the root <svg> element:

1. width and height: Define explicit intrinsic physical dimensions (e.g., in pixels, ems, or percentages).
2. viewBox: Defines the internal coordinate system via four numbers (min-x, min-y, width, height). The ratio between the viewBox width and height establishes the SVG’s intrinsic aspect ratio.

Dimension Resolution Scenarios

When an SVG is placed in an unconstrained container (such as an <img> tag without CSS sizing), the browser follows a defined fallback hierarchy:

1. Both width/height and viewBox are present

The browser assigns the intrinsic width and height directly from the respective attributes. The viewBox dictates the aspect ratio and coordinates for scaling the internal graphics within those bounds.

2. Both width and height are present without a viewBox

The browser uses the specified width and height as the intrinsic dimensions. The intrinsic aspect ratio is calculated as width / height. Graphics inside the SVG are clipped or positioned based on absolute coordinate units.

3. Only the viewBox is present

The SVG has an intrinsic aspect ratio, but no intrinsic width or height. In an unconstrained context, the browser applies the default object size rules for replaced elements: * The element expands to fit the available container width. * The height is calculated using the container width divided by the aspect ratio. * If no container width is provided, the browser defaults to a standard fallback width of 300px, calculating the height proportionally.

4. One dimension (width or height) is present alongside viewBox

The browser uses the single provided dimension as an intrinsic value and computes the missing dimension by applying the aspect ratio derived from the viewBox.

5. One dimension is present without viewBox

The specified dimension is used directly. Because no aspect ratio is available, the missing dimension defaults to the standard replaced element fallback (typically 150px if height is missing, or 300px if width is missing).

6. Neither width/height nor viewBox are present

The SVG possesses neither intrinsic dimensions nor an intrinsic aspect ratio. The browser treats the SVG as a generic replaced element and assigns the CSS default sizing: a width of 300px and a height of 150px (a 2:1 ratio).

Inline <svg> vs. <img> Embedding

• Replaced Elements (<img>, <object>, <iframe>): Follow strict CSS replaced element sizing rules, falling back to 300px by 150px if dimensions and aspect ratios cannot be resolved.
• Inline HTML (<svg> in DOM): Render as inline blocks by default in standard HTML5. If unconstrained, modern layout engines compute size based on the root attributes or default to stretching across the available block-formatting context width while resolving height via the viewBox ratio.