Add getPathData and setPathData methods

files/en-us/web/api/svgpathelement/getpathdata/index.md

@@ -0,0 +1,87 @@
+---
+title: "SVGPathElement: getPathData() method"
+short-title: getPathData()
+slug: Web/API/SVGPathElement/getPathData
+page-type: web-api-instance-method
+browser-compat: api.SVGPathElement.getPathData
+---
+
+{{APIRef("SVG")}}
+
+The **`SVGPathElement.getPathData()`** method returns the sequence of path segments that corresponds to the path data, optionally normalizing the values and segment types.
+
+## Syntax
+
+```js-nolint
+getPathData()
+getPathData(options)
+```
+
+### Parameters
+
+- `options` {{optional_inline}}
+
+  - : An optional object for controlling aspects of the path data retrieval process. This object may contain the following properties:
+
+    - `normalize` {{optional_inline}}
+      - : A boolean value indicating whether the returned sequence of path segments is converted to the base set of [absolute commands](/en-US/docs/Web/SVG/Reference/Attribute/d#path_commands) (`'M'`, `'L'`, `'C'` and `'Z'`), with the values adjusted accordingly.
+
+### Return value
+
+An array of path segments corresponding to the path data. If no valid path data exists, returns an empty sequence.
+
+Each path segment is an object with the following properties:
+
+- `type`
+  - : A [path commands](/en-US/docs/Web/SVG/Reference/Attribute/d#path_commands).
+    If [`options.normalize`](/en-US/docs/Web/API/SVGPathElement/getPathData#normalize) is true this will be one of the the absolute commands: `'M'`, `'L'`, `'C'` and `'Z'`.
+- `values`
+  - : An array or value containing the parameters for the corresponding command.
+
+## Examples
+
+### Get path data
+
+Consider the following `<path>` element, drawing a square:
+
+```xml
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64">
+  <path d="M0,0 h64 v64 h-64 z" />
+</svg>
+```
+
+The `getPathData()` method will return an array with the raw path data, the same as it's set in the `d` attribute. With the `normalize: true` option set, it will return path data normalized to the base set of path commands:
+
+```js
+const path = document.querySelector("path");
+
+console.log(path.getPathData());
+
+// Output: raw path data:
+// [
+//   { type: "M", values: [0, 0] },
+//   { type: "h", values: [64] },
+//   { type: "v", values: [64] },
+//   { type: "h", values: [-64] },
+//   { type: "Z", values: [] }
+// ]
+
+console.log(path.getPathData({ normalize: true }));
+
+// Output: normalized path data:
+// [
+//   { type: "M", values: [0, 0] },
+//   { type: "L", values: [64, 0] },
+//   { type: "L", values: [64, 64] },
+//   { type: "L", values: [0, 64] },
+//   { type: "Z", values: [] }
+// ]
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}

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

@@ -22,6 +22,13 @@ _This interface inherits properties from its parent, {{domxref("SVGGeometryEleme
 
 _This interface also inherits methods from its parent, {{domxref("SVGGeometryElement")}}._
 
+- {{domxref("SVGPathElement.getPathData()")}}
+  - : Returns the sequence of path segments that corresponds to the path data, optionally normalizing the values and segment types.
+- {{domxref("SVGPathElement.setPathData()")}}
+  - : Sets the sequence of path segments as the new path data.
+
+### Deprecated methods
+
 - {{domxref("SVGPathElement.getPathSegAtLength()")}} {{deprecated_inline}}
   - : Returns an unsigned long representing the index within the {{domxref("SVGAnimatedPathData.pathSegList", "pathSegList")}} utilizing the user agent's distance-along-a-path algorithm.
 - {{domxref("SVGPathElement.createSVGPathSegClosePath()")}} {{deprecated_inline}}

files/en-us/web/api/svgpathelement/setpathdata/index.md

@@ -0,0 +1,66 @@
+---
+title: "SVGPathElement: setPathData() method"
+short-title: setPathData()
+slug: Web/API/SVGPathElement/setPathData
+page-type: web-api-instance-method
+browser-compat: api.SVGPathElement.setPathData
+---
+
+{{APIRef("SVG")}}
+
+The **`SVGPathElement.setPathData()`** method sets the sequence of path segments as the new path data.
+
+## Syntax
+
+```js-nolint
+setPathData(pathData)
+```
+
+### Parameters
+
+- `pathData`
+
+  - : An array of path segments.
+    Each path segment is an object with the following properties:
+
+    - `type`
+      - : A [path commands](/en-US/docs/Web/SVG/Reference/Attribute/d#path_commands).
+        If [`options.normalize`](/en-US/docs/Web/API/SVGPathElement/getPathData#normalize) is true this will be one of the the absolute commands: `'M'`, `'L'`, `'C'` and `'Z'`.
+    - `values`
+      - : An array or value containing the parameters for the corresponding command.
+
+### Return value
+
+None ({{jsxref('undefined')}}).
+
+## Example
+
+### Set path data
+
+Consider the following `<path>` element, drawing a square:
+
+```xml
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64">
+  <path d="M0,0 h64 v64 h-64 z" />
+</svg>
+```
+
+The code below uses {{domxref("SVGPathElement/getPathData", "getPathData()")}} method to return the normalized path data as [absolute commands](/en-US/docs/Web/SVG/Reference/Attribute/d#path_commands).
+Setting the returned data back to the `<path>` element using the `setPathData()` method will result in the different set of path commands in the DOM:
+
+```js
+const svgPath = document.querySelector("path");
+const pathData = path.getPathData({ normalize: true });
+
+svgPath.setPathData(pathData);
+
+// <path d="M 0 0 L 64 0 L 64 64 L 0 64 Z" />
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}