<view>
A view is a defined way to view the image, like a zoom level or a detail view.
Usage context
| Categories | None |
|---|---|
| Permitted content | Any number of the following elements, in any order: Descriptive elements |
Attributes
Global attributes
Specific attributes
Example
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
<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
DOM Interface
This element implements the SVGViewElement interface.
Specifications
Browser compatibility
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
view |
Yes
|
≤18
|
15
|
No
|
Yes
|
?
|
Yes
|
Yes
|
15
|
?
|
?
|
Yes
|
preserveAspectRatio |
?
|
?
|
?
|
No
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
viewBox |
?
|
?
|
?
|
No
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
viewTarget |
?
|
?
|
?
|
No
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
zoomAndPan |
?
|
?
|
?
|
No
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
?
|
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/view
