v157 · svg embedded content sizing

<object> vs <embed> vs <img> parity lab

The three containers below load the exact same width="120" height="80" SVG document inside a 240×160 host box. Switch object-fit and object-position to verify visual parity across <object>, <embed>, and <img>, and inspect the live contentDocument.documentElement.getScreenCTM() matrix on <object>.

Live replaced-element comparison & CTM geometry probe

Try object-fit: none + object-position: 80% 20%: In Chrome 157, all three elements render the unscaled 120×80 SVG badge positioned toward the top-right of the 240×160 box (scaleX = 1.0). In pre-157 browsers, <object> and <embed> ignore both CSS rules and stretch the SVG 2.0× to fill 240×160.

1. <object type="image/svg+xml">

Exposes live contentDocument + obeys CSS in Chrome 157.

2. <embed type="image/svg+xml">

Embedded plugin/SVG container sized by CSS in Chrome 157.

3. <img> (reference baseline)

Intrinsic 120x80 SVG inside img reference element Reference replaced element behavior (no contentDocument).
Measuring contentDocument and getScreenCTM() geometry...

code path

const objectEl = document.getElementById("demo-object");
objectEl.style.objectFit = "none";
objectEl.style.objectPosition = "80% 20%";

// Inspect the SVG root inside  to verify concrete object sizing:
const svgRoot = objectEl.contentDocument?.documentElement;
const ctm = svgRoot?.getScreenCTM();
console.log({
  computedObjectFit: getComputedStyle(objectEl).objectFit,
  scaleX: ctm?.a, // 1.0 in Chrome 157 (unscaled 120x80); 2.0 in pre-157
  scaleY: ctm?.d,
});
  

  
see also