<view> in SVG: a URL anchor that frames one part of a file

An icon library often packs dozens of symbols into a single SVG file, so the browser does not have to load a dozen tiny separate files. That leaves one real problem: how to show only the star from that file, without touching the heart right next to it, and without duplicating the file once per icon?

<view> answers that by naming a precise region of the SVG, one that can then be targeted straight from a URL, the same way an anchor targets a section of an HTML page.

Definition

<view> defines a named view: an id paired with its own viewBox, independent from the one on the root <svg>. Adding #viewName to the end of the SVG file's URL, for example in the src attribute of an <img> tag, makes the browser show only the framing set by that view, as if it had automatically zoomed into that part of the drawing. The source file itself never changes: one single copy of the SVG is enough for every view it contains.

Main attributes

<view> sticks to a handful of attributes, all about framing. id gives the name used after the hash in the URL. viewBox sets the region of the drawing to show, with its own coordinates. preserveAspectRatio controls how that region adjusts if the display box does not share the exact same proportions.

A concrete example

One single icons.svg file can hold a star and a heart, each tied to its own view.

<svg viewBox="0 0 64 32" xmlns="http://www.w3.org/2000/svg">
  <view id="star" viewBox="0 0 32 32" />
  <path
    d="M16 3l3.5 7.6 8 1-6 5.9 1.4 8.4-6.9-4-6.9 4 1.4-8.4-6-5.9 8-1z"
    fill="#f59e0b"
  />
  <view id="heart" viewBox="32 0 32 32" />
  <path
    transform="translate(32,0)"
    d="M16 27S4 19 4 11a6 6 0 0 1 12-1 6 6 0 0 1 12 1c0 8-12 16-12 16z"
    fill="#ef4444"
  />
</svg>

Two <img> tags are then enough to show just one icon or the other, automatically framed and scaled to whatever size is requested.

<img src="icons.svg#star" alt="Star icon" width="32" height="32" />
<img src="icons.svg#heart" alt="Heart icon" width="32" height="32" />

Difference with <symbol>

<symbol> and <use> solve a related problem, reusing a drawing several times, but through a different route: <symbol> declares a template that stays invisible by default, and <use> inserts copies of it directly into the HTML document, right alongside the rest of the page's content. <view> copies nothing: it targets a region of an external SVG file, loaded as an image on its own, through src or background-image. Which one to reach for mostly depends on where the SVG lives: inline in the page for the first two, in a separate file for <view>.

Classic trap

A real use case

A site showing a dozen social media icons from one single sprite.svg file is the textbook case: each logo gets its own #viewName, every <img> tag on the site points at a different view, and the browser downloads the file only once, cached for every icon that follows.

Frequently asked questions

Support is patchier across browsers than with a plain <img> tag, which is why it is worth testing the exact target before relying on it for an important piece of an interface.

Yes, with no limit on the number: that is really the whole point of the element, since a single file can hold dozens of named views this way, one per icon or per region worth isolating.

It only replaces it for the specific display requested through the URL fragment. Without a fragment in the address, the root's viewBox is still the one used, exactly as if <view> did not exist.