{"id":18284538,"url":"https://github.com/colinmeinke/svg-points","last_synced_at":"2025-04-09T21:16:30.626Z","repository":{"id":55835408,"uuid":"54806188","full_name":"colinmeinke/svg-points","owner":"colinmeinke","description":"A specification for storing SVG shape data in Javascript, and some handy conversion functions","archived":false,"fork":false,"pushed_at":"2022-11-17T14:06:30.000Z","size":149,"stargazers_count":99,"open_issues_count":2,"forks_count":11,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-09T21:16:24.587Z","etag":null,"topics":["javascript","shapes","svg"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/colinmeinke.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-03-27T00:48:35.000Z","updated_at":"2025-03-17T19:51:11.000Z","dependencies_parsed_at":"2022-08-15T07:40:22.714Z","dependency_job_id":null,"html_url":"https://github.com/colinmeinke/svg-points","commit_stats":null,"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colinmeinke%2Fsvg-points","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colinmeinke%2Fsvg-points/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colinmeinke%2Fsvg-points/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colinmeinke%2Fsvg-points/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/colinmeinke","download_url":"https://codeload.github.com/colinmeinke/svg-points/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248111973,"owners_count":21049578,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","shapes","svg"],"created_at":"2024-11-05T13:13:51.675Z","updated_at":"2025-04-09T21:16:30.576Z","avatar_url":"https://github.com/colinmeinke.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SVG points\n\nA specification for storing SVG shape data in Javascript.\n\nBest paired with the classic\n[points library](https://github.com/colinmeinke/points)\nfor powerful shape manipulation.\n\nIf you are looking to convert a SVG DOM node directly to SVG points,\nthen check out the `plainShapeObject` function of\n[Wilderness DOM node](https://github.com/colinmeinke/wilderness-dom-node#readme).\n\n**2.6kb gzipped.**\n\n## Example shape\n\n```js\n{\n  type: 'circle',\n  cx: 50,\n  cy: 50,\n  r: 20\n}\n```\n\n## Functions\n\n- [toPoints](#topoints) – converts an SVG shape object to a\n  [points array](https://github.com/colinmeinke/points)\n- [toPath](#topath) – converts an SVG shape object or a\n  points array to an SVG path `d` attribute string.\n- [valid](#valid) – checks an SVG shape object is\n  valid\n\n## Specification\n\nA SVG shape is an object that includes a `type` property\nthat can take one of the following strings.\n\n- [`circle`](#circle)\n- [`ellipse`](#ellipse)\n- [`line`](#line)\n- [`path`](#path)\n- [`polygon`](#polygon)\n- [`polyline`](#polyline)\n- [`rect`](#rect)\n- [`g`](#g)\n\nIt also maps all the other required SVG attributes for that\nparticular shape to object properties.\n\n### Shape types\n\n#### circle\n\n```js\n{\n  type: 'circle',\n  cx: 50,\n  cy: 50,\n  r: 20\n}\n```\n\n#### ellipse\n\n```js\n{\n  type: 'ellipse',\n  cx: 100,\n  cy: 300,\n  rx: 65,\n  ry: 120\n}\n```\n\n#### line\n\n```js\n{\n  type: 'line',\n  x1: 10,\n  x2: 50,\n  y1: 70,\n  y2: 200\n}\n```\n\n#### path\n\n```js\n{\n  type: 'path',\n  d: 'M20,20h50v20A2,2,0,0,1,80,35L90,30H50V50a5,5,45,1,0-5-10l-5-10Z'\n}\n```\n\n#### polygon\n\n```js\n{\n  type: 'polygon',\n  points: '20,30 50,90 20,90 50,30'\n}\n```\n\n#### polyline\n\n```js\n{\n  type: 'polyline',\n  points: '20,30 50,90 20,90 50,30'\n}\n```\n\n#### rect\n\n```js\n{\n  type: 'rect',\n  height: 20,\n  width: 50,\n  x: 10,\n  y: 10,\n  rx: 2,\n  ry: 2\n}\n```\n\nThe properties `rx` and `ry` are optional and if missing are\nassumed to be `0`.\n\n#### g\n\n```js\n{\n  type: 'g',\n  shapes: [\n    {\n      type: 'circle',\n      cx: 50,\n      cy: 50,\n      r: 20\n    },\n    {\n      type: 'line',\n      x1: 10,\n      x2: 50,\n      y1: 70,\n      y2: 200\n    }\n  ]\n}\n```\n\n## Installation\n\n```\nnpm install svg-points\n```\n\n## Usage\n\n### toPoints\n\n```js\nimport { toPoints } from 'svg-points'\n\nconst circle = {\n  type: 'circle',\n  cx: 50,\n  cy: 50,\n  r: 20\n}\n\nconst points = toPoints(circle)\n\nconsole.log(points)\n\n// [\n//   { x: 50, y: 30, moveTo: true },\n//   { x: 50, y: 70, curve: { type: 'arc', rx: 20, ry: 20, sweepFlag: 1 } },\n//   { x: 50, y: 30, curve: { type: 'arc', rx: 20, ry: 20, sweepFlag: 1 } }\n// ]\n```\n\nTakes an SVG shape object as the only argument, and\nreturns a new\n[points array](https://github.com/colinmeinke/points).\n\nIf passing in a group shape object then returns an array of\npoints arrays.\n\n### toPath\n\n```js\nimport { toPath } from 'svg-points'\n\nconst circle = {\n  type: 'circle',\n  cx: 50,\n  cy: 50,\n  r: 20\n}\n\nconst d = toPath(circle)\n\nconsole.log(d)\n\n// 'M50,30A20,20,0,0,1,50,70A20,20,0,0,1,50,30Z'\n```\n\nTakes either an SVG shape object, or a\n[points array](https://github.com/colinmeinke/points),\nand returns a SVG path `d` attribute string.\n\nIf passing in a group shape object, or an array of\npoints arrays then returns an array of SVG path `d`\nattribute strings.\n\n### valid\n\n```js\nimport { valid } from 'svg-points'\n\nconst ellipse = {\n  type: 'ellipse',\n  cy: 50,\n  rx: 5,\n  ry: 10\n}\n\nconst { errors } = valid(ellipse)\n\nconsole.log(errors)\n\n// [ 'cx prop is required on a ellipse' ]\n```\n\n## CommonJS\n\nThis is how you get to the good stuff if you're using\n`require`.\n\n```js\nconst SVGPoints = require('svg-points')\nconst toPoints = SVGPoints.toPoints\nconst toPath = SVGPoints.toPath\n```\n\n## UMD\n\nAnd if you just want to smash in a Javascript file you're\nalso covered. Drop this in place ...\n\n[https://unpkg.com/svg-points/dist/svg-points.min.js](https://unpkg.com/svg-points/dist/svg-points.min.js)\n\nThen access it on the `SVGPoints` global variable.\n\n```js\nconst toPoints = SVGPoints.toPoints\nconst toPath = SVGPoints.toPath\n```\n\n## Help make this better\n\n[Issues](https://github.com/colinmeinke/svg-points/issues/new)\nand pull requests gratefully received!\n\nI'm also on twitter [@colinmeinke](https://twitter.com/colinmeinke).\n\nThanks :star2:\n\n## License\n\n[ISC](./LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcolinmeinke%2Fsvg-points","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcolinmeinke%2Fsvg-points","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcolinmeinke%2Fsvg-points/lists"}