Embedded content

audio, canvas, iframe, img, svg, and video get a small set of consistency fixes, most importantly responsive images by default.

<figure>
  <svg viewBox="0 0 200 80" width="100%" height="80" role="img" aria-label="Placeholder graphic">
    <rect width="200" height="80" rx="8" fill="currentColor" opacity="0.12"></rect>
    <text x="100" y="45" text-anchor="middle" fill="currentColor" font-size="14">svg, responsive by default</text>
  </svg>
  <figcaption>Images and inline SVG scale to their container automatically.</figcaption>
</figure>

<img src="…" alt="…">
<svg viewBox="0 0 200 80" role="img" aria-label="…">…</svg>

Behavior #

• img is max-width: 100%; height: auto, responsive without a class, and never overflows its container. An explicit height attribute given as the only dimension is respected; with both attributes present, height: auto preserves the attribute-derived aspect ratio on downscale.
• audio, canvas, iframe, img, svg, video are vertically middle aligned, which avoids the small inline baseline gap browsers add by default.
• iframe has no border by default.
• svg without an explicit fill inherits currentColor, so an icon SVG follows the surrounding text color unless it sets its own fill.