Nested Viewports

Nested Viewports

Nested Viewports and the `<view>` Element

A nested <svg> opens a new viewport at its x and y, with its own size and viewBox, and clips what falls outside. <view> names an alternative viewBox; linking to file.svg#id shows only that region. Older references call it unsupported, but MDN 102 lists it as Baseline since October 2018.

A nested viewport, and a <view> selected by URL fragmentHTMLLive

<svg width="330" height="100" style="background:#eceff1">
  <rect x="10" y="10" width="200" height="80" fill="#fff3e0"/>
  <svg x="220" y="10" width="80" height="80" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="60" fill="#5b3f99"/>   <!-- r=60 overflows: clipped -->
  </svg>
</svg>
<img width="100" height="100" alt="green circle" src="data:image/svg+xml,%3Csvg xmlns=
  'http://www.w3.org/2000/svg' viewBox='0 0 300 100'%3E
  %3Cview id='two' viewBox='100 0 100 100'/%3E
  %3Ccircle cx='50' cy='50' r='40' fill='%23b5452f'/%3E
  %3Ccircle cx='150' cy='50' r='40' fill='%233f7d3a'/%3E%3C/svg%3E#two">

Browser output of 3

The purple circle overflows its viewBox and is clipped (overflow="visible" prevents that). The image loads a two-circle file with the fragment #two, and only the green circle shows.

MENU