New Pages: SVGViewElement properties (#37363)

files/en-us/web/api/svgviewelement/index.md

@@ -15,6 +15,11 @@ The **`SVGViewElement`** interface provides access to the properties of {{SVGEle
 
 _This interface also inherits properties from its parent interface, {{domxref("SVGElement")}}._
 
+- {{domxref("SVGViewElement.viewBox")}} {{ReadOnlyInline}}
+  - : An {{domxref("SVGAnimatedRect")}} corresponding to the {{SVGAttr("viewBox")}} attribute of the given {{SVGElement("view")}} element.
+- {{domxref("SVGViewElement.preserveAspectRatio")}} {{ReadOnlyInline}}
+  - : An {{domxref("SVGAnimatedPreserveAspectRatio")}} corresponding to the {{SVGAttr("preserveAspectRatio")}} attribute of the given {{SVGElement("view")}} element.
+
 ## Instance methods
 
 _This interface doesn't implement any specific methods, but inherits methods from its parent interface, {{domxref("SVGElement")}}._

files/en-us/web/api/svgviewelement/preserveaspectratio/index.md

@@ -0,0 +1,46 @@
+---
+title: "SVGViewElement: preserveAspectRatio property"
+short-title: preserveAspectRatio
+slug: Web/API/SVGViewElement/preserveAspectRatio
+page-type: web-api-instance-property
+browser-compat: api.SVGViewElement.preserveAspectRatio
+---
+
+{{APIRef("SVG")}}
+
+The **`preserveAspectRatio`** read-only property of the {{domxref("SVGViewElement")}} interface reflects the {{SVGAttr("preserveAspectRatio")}} attribute of the given {{SVGElement("view")}} element. It defines how the content within the `view` should be scaled to fit its viewport while preserving its aspect ratio.
+
+## Value
+
+An {{domxref("SVGAnimatedPreserveAspectRatio")}} object.
+
+## Example
+
+Given the following SVG, we can use the `preserveAspectRatio` property to retrieve the scaling behavior for a `view` element:
+
+```html
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
+  <view id="view1" preserveAspectRatio="xMidYMid meet"></view>
+  <circle cx="100" cy="100" r="80" fill="blue" />
+</svg>
+```
+
+We can access the `preserveAspectRatio` attribute:
+
+```js
+const view = document.querySelector("view");
+
+console.log(view.preserveAspectRatio.baseVal); // output: SVGPreserveAspectRatio {align: 1, meetOrSlice: 1}
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{SVGAttr("preserveAspectRatio")}}

files/en-us/web/api/svgviewelement/viewbox/index.md

@@ -0,0 +1,46 @@
+---
+title: "SVGViewElement: viewBox property"
+short-title: viewBox
+slug: Web/API/SVGViewElement/viewBox
+page-type: web-api-instance-property
+browser-compat: api.SVGViewElement.viewBox
+---
+
+{{APIRef("SVG")}}
+
+The **`viewBox`** read-only property of the {{domxref("SVGViewElement")}} interface reflects the {{SVGAttr("viewBox")}} attribute of the given {{SVGElement("view")}} element. It represents the `x`, `y`, `width`, and `height` values defining the area to be used for the `view`'s `viewBox`.
+
+## Value
+
+An {{domxref("SVGAnimatedRect")}} object.
+
+## Example
+
+Given the following SVG, we can use the `viewBox` property to retrieve the dimensions of the `viewBox` for a `view` element:
+
+```html
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
+  <view id="view1" viewBox="0 0 50 50"></view>
+  <circle cx="100" cy="100" r="80" fill="blue" />
+</svg>
+```
+
+We can access the `viewBox` attribute:
+
+```js
+const view = document.querySelector("view");
+
+console.log(view.viewBox.baseVal); // output: DOMRect {x: 0, y: 0, width: 50, height: 50}
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{SVGAttr("viewBox")}}