New pages: SVGSVGElement API properties (#37281)

* New pages: SVGSVGElement API properties

* New pages: SVGSVGElement API properties

* New pages: SVGSVGElement API properties

* New pages: SVGSVGElement API properties

* new page: SVGSVGElement.height

* updates per review

* Update files/en-us/web/api/svgsvgelement/viewbox/index.md

---------

Co-authored-by: wbamberg <[email protected]>

files/en-us/web/api/svgsvgelement/height/index.md

@@ -0,0 +1,39 @@
+---
+title: "SVGSVGElement: height property"
+short-title: height
+slug: Web/API/SVGSVGElement/height
+page-type: web-api-instance-property
+browser-compat: api.SVGSVGElement.height
+---
+
+{{APIRef("SVG")}}
+
+The **`height`** read-only property of the {{domxref("SVGSVGElement")}} interface describes the vertical size of element as an {{domxref("SVGAnimatedLength")}}. It reflects the {{SVGElement("svg")}} element's {{SVGAttr("height")}} attribute, which may not be the SVG's rendered height.
+
+The CSS {{cssxref("height")}} property takes precedence over the `<svg>` element's `height` attribute, so the value may not reflect the element's appearance. If both the {{SVGAttr("viewBox")}} and `height` attributes are omitted, the `height` property reflects that actual height.
+
+## Value
+
+An {{domxref("SVGAnimatedLength")}}.
+
+## Example
+
+```js
+const svg = document.querySelector("svg");
+const verticalSize = svg.height;
+console.dir(verticalSize.baseVal.value); // the `height` value
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGSVGElement.viewBox")}}
+- {{domxref("SVGSVGElement.width")}}
+- {{domxref("SVGAnimatedLength.baseVal")}}

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

@@ -0,0 +1,61 @@
+---
+title: "SVGSVGElement: viewBox property"
+short-title: viewBox
+slug: Web/API/SVGSVGElement/viewBox
+page-type: web-api-instance-property
+browser-compat: api.SVGSVGElement.viewBox
+---
+
+{{APIRef("SVG")}}
+
+The **`viewBox`** read-only property of the {{domxref("SVGSVGElement")}} interface reflects the {{SVGElement("svg")}} element's {{SVGAttr("viewBox")}} attribute as an {{domxref("SVGAnimatedRect")}}.
+
+The property describes the `<svg>` element's `<viewBox>` attribute, which is used to defined the x-coordinate, y-coordinate, width, and height of an `<svg>` element. The {{domxref("SVGAnimatedRect.baseVal")}} and {{domxref("SVGAnimatedRect.animVal")}} properties are both {{domxref("SVGRect")}} objects, or `null` if the `viewBox` is not defined. These objects' components my differ from the {{domxref("SVGSVGElement.x")}}, {{domxref("SVGSVGElement.y")}}, {{domxref("SVGSVGElement.width")}} and {{domxref("SVGSVGElement.height")}} properties, as the {{SVGAttr("x")}}, {{SVGAttr("y")}}, {{SVGAttr("width")}}, and {{SVGAttr("height")}} attributes take precedence over the `viewBox` attribute.
+
+For non-nested SVG elements, the values of the CSS {{cssxref("x")}}, {{cssxref("y")}}, {{cssxref("width")}}, and {{cssxref("height")}} properties take precedence over any element attributes, so the values defined by the `viewBox` may not be reflected in the element's appearance.
+
+## Value
+
+An {{domxref("SVGAnimatedRect")}}.
+
+## Example
+
+Give the following SVG opening tag:
+
+```html
+<svg viewbox="-12 -18 200 300" x="5" y="5" height="400" width="600"></svg>
+```
+
+We can retrieve the viewBox values, but they differ from the {{domxref("SVGSVGElement.x", "x")}}, {{domxref("SVGSVGElement.y", "y")}}, {{domxref("SVGSVGElement.width", "width")}}, and {{domxref("SVGSVGElement.height", "height")}} properties:
+
+```js
+const svg = document.querySelector("svg");
+const vBox = svg.viewBox;
+
+// The SVGSVGElement viewBox property
+console.dir(vBox); // SVGAnimatedRect { baseVal: SVGRect, animVal: SVGRect }
+​console.log(vBox.baseVal.x); // -12
+​console.log(vBox.baseVal.y); // -18
+​console.log(vBox.baseVal.width); // 200
+​console.log(vBox.baseVal.height); // 300
+
+// Other SVGSVGElement properties
+​console.log(svg.x); // 5
+​console.log(svg.y); // 5
+​console.log(svg.width); // 400
+​console.log(svg.height); // 600
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedRect.baseVal")}}
+- {{domxref("SVGAnimatedRect.animVal")}}
+- {{SVGAttr("preserveAspectRatio")}}

files/en-us/web/api/svgsvgelement/width/index.md

@@ -0,0 +1,38 @@
+---
+title: "SVGSVGElement: width property"
+short-title: width
+slug: Web/API/SVGSVGElement/width
+page-type: web-api-instance-property
+browser-compat: api.SVGSVGElement.width
+---
+
+{{APIRef("SVG")}}
+
+The **`width`** read-only property of the {{domxref("SVGSVGElement")}} interface describes the horizontal size of element as an {{domxref("SVGAnimatedLength")}}. It reflects the {{SVGElement("svg")}} element's {{SVGAttr("width")}} attribute, which may not be the SVG's rendered width.
+
+The CSS {{cssxref("width")}} property takes precedence over the `<svg>` element's `width` attribute, so the value may not reflect the element's appearance. If both the {{SVGAttr("viewBox")}} and `width` attributes are omitted, the `width` property reflects that actual width.
+
+## Value
+
+An {{domxref("SVGAnimatedLength")}}.
+
+## Example
+
+```js
+const svg = document.querySelector("svg");
+const inlineSize = svg.width;
+console.dir(inlineSize.baseVal.value); // the `width` value
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGSVGElement.viewBox")}}
+- {{domxref("SVGAnimatedLength.baseVal")}}

files/en-us/web/api/svgsvgelement/x/index.md

@@ -0,0 +1,38 @@
+---
+title: "SVGSVGElement: x property"
+short-title: x
+slug: Web/API/SVGSVGElement/x
+page-type: web-api-instance-property
+browser-compat: api.SVGSVGElement.x
+---
+
+{{APIRef("SVG")}}
+
+The **`x`** read-only property of the {{domxref("SVGSVGElement")}} interface describes the horizontal coordinate of the position of that SVG as an {{domxref("SVGAnimatedLength")}}. When an {{SVGElement("svg")}} is nested within another `<svg>`, the horizontal coordinate is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the x-axis. Its syntax is the same as that for [`<length>`](/en-US/docs/Web/SVG/Content_type#length).
+
+It reflects the {{SVGElement("svg")}} element's {{SVGAttr("x")}} geometric attribute. The default value is `0`. The `x` attribute has no effect on outermost `<svg>` elements; only one nested ones. The CSS {{cssxref("x")}} property takes precedence over the `<svg>` element's `x` attribute, so the value may not reflect the element's appearance.
+
+## Value
+
+An {{domxref("SVGAnimatedLength")}}.
+
+## Example
+
+```js
+const svg = document.querySelector("svg");
+const leftPosition = svg.x;
+console.dir(leftPosition.baseVal.value); // the `x` value
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGSVGElement.y")}}
+- {{domxref("SVGAnimatedLength.baseVal")}}

files/en-us/web/api/svgsvgelement/y/index.md

@@ -0,0 +1,38 @@
+---
+title: "SVGSVGElement: y property"
+short-title: y
+slug: Web/API/SVGSVGElement/y
+page-type: web-api-instance-property
+browser-compat: api.SVGSVGElement.y
+---
+
+{{APIRef("SVG")}}
+
+The **`y`** read-only property of the {{domxref("SVGSVGElement")}} interface describes the vertical coordinate of the position of that SVG as an {{domxref("SVGAnimatedLength")}}. When an {{SVGElement("svg")}} is nested within another `<svg>`, the vertical coordinate is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the y-axis. Its syntax is the same as that for [`<length>`](/en-US/docs/Web/SVG/Content_type#length).
+
+It reflects the {{SVGElement("svg")}} element's {{SVGAttr("y")}} geometric attribute. The default value is `0`. The `y` attribute has no effect on outermost `<svg>` elements; only on nested ones. The CSS {{cssxref("y")}} property takes precedence over the `<svg>` element's `y` attribute, so the value may not reflect the element's appearance.
+
+## Value
+
+An {{domxref("SVGAnimatedLength")}}.
+
+## Example
+
+```js
+const svg = document.querySelector("svg");
+const topPosition = svg.y;
+console.dir(leftPosition.baseVal.value); // the `y` value
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGSVGElement.x")}}
+- {{domxref("SVGAnimatedLength.baseVal")}}