# path-data-polyfill

> Polyfill for SVG 2 getPathData() and setPathData() methods

Latest version **1.0.10** (published 2025-04-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install path-data-polyfill
pnpm add path-data-polyfill
yarn add path-data-polyfill
bun add path-data-polyfill
```

## Health

**Score 30/100 (F)** — status: maintenance-mode.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.10 |
| Published | 2025-04-23 |
| First published | 2016-06-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 40.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 130 |
| Author | Jarosław Foksa |
| Maintainers | jarek-foksa |
| Keywords | svg, path, polyfill |

## Links

- npm: https://www.npmjs.com/package/path-data-polyfill
- Repository: https://github.com/jarek-foksa/path-data-polyfill.js
- Homepage: https://github.com/jarek-foksa/path-data-polyfill#readme
- Issues: https://github.com/jarek-foksa/path-data-polyfill/issues
- npm.io page: https://npm.io/package/path-data-polyfill

## Alternatives

- [base64url](https://npm.io/package/base64url.md) — 6.1M weekly downloads
- [get-installed-path](https://npm.io/package/get-installed-path.md) — 502.9K weekly downloads
- [@uppy/url](https://npm.io/package/@uppy/url.md) — 185.8K weekly downloads
- [@d3fc/d3fc-shape](https://npm.io/package/@d3fc/d3fc-shape.md) — 16.2K weekly downloads
- [localizer](https://npm.io/package/localizer.md) — 226 weekly downloads

## Recent versions

- 1.0.10 (latest) — 2025-04-23
- 1.0.9 — 2025-04-13
- 1.0.8 — 2025-04-04
- 1.0.7 — 2025-03-12
- 1.0.6 — 2024-05-02
- 1.0.5 — 2024-05-02
- 1.0.4 — 2022-09-07
- 1.0.3 — 2018-06-24
- 1.0.0 — 2016-06-10

## README

## Polyfill for SVG getPathData() and setPathData() methods

Follows the working draft of the [SVG Paths specification](https://svgwg.org/specs/paths/#InterfaceSVGPathData). Additionally includes the features proposed in [#155](https://github.com/w3c/svgwg/issues/155).

**Based on**:
- SVGPathSeg polyfill by Philip Rogers (MIT License)
  https://github.com/progers/pathseg
- SVGPathNormalizer by Tadahisa Motooka (MIT License)
  https://github.com/motooka/SVGPathNormalizer/tree/master/src
- arcToCubicCurves() by Dmitry Baranovskiy (MIT License)
  https://github.com/DmitryBaranovskiy/raphael/blob/v2.1.1/dev/raphael.core.js#L1837

**More info**:

- https://lists.w3.org/Archives/Public/www-svg/2015Feb/0036.html
- https://groups.google.com/a/chromium.org/forum/#!searchin/blink-dev/pathSegList/blink-dev/EDC3cBg9mCU/Ukhx2UXmCgAJ
- https://code.google.com/p/chromium/issues/detail?id=539385
- https://code.google.com/p/chromium/issues/detail?id=545467

## Usage

### Print each path segment to console

```js
let logPathSegments = (path) => {
  for (let seg of path.getPathData()) {
    if (seg.type === "M") {
      let [x, y] = seg.values;
      console.log(`M ${x} ${y}`);
    }
    else if (seg.type === "L") {
      let [x, y] = seg.values;
      console.log(`L ${x} ${y}`);
    }
    else if (seg.type === "C") {
      let [x1, y1, x2, y2, x, y] = seg.values;
      console.log(`C ${x1} ${y1} ${x2}, ${y2}, ${x} ${y}`);
    }
    ...
  }
};
```

### Create a triangle path

```js

let createTrianglePath = (x = 0, y = 0, width = 100, height = 200) => {
  let path = document.createElementNS("http://www.w3.org/2000/svg", "path");

  let pathData = [
    { type: "M", values: [x + (width / 2), y] },
    { type: "L", values: [x + width, y + height] },
    { type: "L", values: [x, y + height] },
    { type: "Z", values: []}
  ];

  path.setPathData(pathData);
  return path;
};
```

### Convert an ellipse to a path

```js
let ellipseToPath = (ellipse) => {
  let path = document.createElementNS("http://www.w3.org/2000/svg", "path");

  for (let attribute of ellipse.attributes) {
    if (!["cx", "cy", "rx", "ry"].includes(attribute.name)) {
      path.setAttribute(attribute.name, attribute.value);
    }
  }

  let cx = ellipse.cx.baseVal.value;
  let cy = ellipse.cy.baseVal.value;
  let rx = ellipse.rx.baseVal.value;
  let ry = ellipse.ry.baseVal.value;

  let pathData = [
    {type: "M", values: [cx, cy - ry]},
    {type: "A", values: [rx, ry, 0, 0, 0, cx, cy+ry]},
    {type: "A", values: [rx, ry, 0, 0, 0, cx, cy-ry]},
    {type: "Z", values: []}
  ];
  
  path.setPathData(pathData);
  return path;
};
```

### Normalize a path to "M", "L", "C" and "Z" segments

```js
let normalizePath = (path) => {
  let normalizedPathData = path.getPathData({normalize: true});
  path.setPathData(normalizedPathData);
};
```

---
_Source: https://npm.io/package/path-data-polyfill · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._