<view>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Some parts of this feature may have varying levels of support.

The <view> SVG element defines a particular view of an SVG document. A specific view can be displayed by referencing the <view> element's id as the target fragment of a URL.

Usage context

CategoriesNone
Permitted contentAny number of the following elements, in any order:
Descriptive elements

Attributes

preserveAspectRatio

This attribute defines how the SVG fragment must be deformed if it is embedded in a container with a different aspect ratio. Value type: (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)? ; Default value: xMidYMid meet; Animatable: yes

viewBox

This attribute defines the bound of the SVG viewport for the pattern fragment. Value type: <list-of-numbers> ; Default value: none; Animatable: yes

zoomAndPan Deprecated Non-standard

This attribute specifies whether the SVG document can be magnified and panned. Value type: disable | magnify ; Default value: magnify; Animatable: no

Example

SVG

svg
<svg viewBox="0 0 300 100" width="300" height="100"
      xmlns="http://www.w3.org/2000/svg">

  <view id="one" viewBox="0 0 100 100" />
  <circle cx="50" cy="50" r="40" fill="red" />

  <view id="two" viewBox="100 0 100 100" />
  <circle cx="150" cy="50" r="40" fill="green" />

  <view id="three" viewBox="200 0 100 100" />
  <circle cx="250" cy="50" r="40" fill="blue" />
</svg>

HTML

html
<img src="example.svg" alt="three circles" width="300" height="100" />
<br />
<img src="example.svg#three" alt="blue circle" width="100" height="100" />

Result

Specifications

Specification
Scalable Vector Graphics (SVG) 2
# ViewElement

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
view
preserveAspectRatio
viewBox
zoomAndPan
DeprecatedNon-standard

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.