v157 · svg embedded content sizing

preserveAspectRatio two-stage negotiation matrix

When an SVG document is embedded via <object> or <embed>, two layout engines cooperate: first, CSS Replaced Element layout computes the concrete object rectangle inside the host box using object-fit and object-position; second, the SVG engine maps its viewBox into that concrete rectangle using preserveAspectRatio.

Stage 1 (CSS object-fit) × Stage 2 (SVG preserveAspectRatio)

Key edge case: Notice what happens when CSS object-fit: fill stretches a 120×80 SVG into a 240×140 concrete rectangle. If the root <svg> has preserveAspectRatio="xMidYMid meet", the SVG engine still letterboxes its internal graphics inside that stretched rectangle! Only when preserveAspectRatio="none" does object-fit: fill distort the vector geometry.

<object> (240×140 host)

<embed> (240×140 host)

Two-stage sizing breakdown for the current combination
Pipeline Stage Controlling Property / Attribute Computed Rectangle / Transform
Evaluating Stage 1 (CSS object-fit) and Stage 2 (SVG preserveAspectRatio) composition...

code path

<!-- Stage 1: CSS on <object> sets the concrete object box (120x80 at 90% 15%) -->
<object
  type="image/svg+xml"
  data="badge.svg"
  style="width: 240px; height: 140px; object-fit: none; object-position: 90% 15%;">
</object>

<!-- Stage 2: Inside badge.svg, viewBox & preserveAspectRatio map into that box -->
<svg xmlns="http://www.w3.org/2000/svg"
     width="120" height="80"
     viewBox="0 0 120 80"
     preserveAspectRatio="xMidYMid meet">
  ...
</svg>

see also