{"_id":"@bunny-editor/svg-toolkit","name":"@bunny-editor/svg-toolkit","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@bunny-editor/svg-toolkit","version":"1.0.0","description":"SVG path parsing, serialization, scaling, and geometry utilities","main":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"tsc","test":"jest"},"keywords":["svg","path","parser","typescript","d-attribute","arc","bezier"],"author":{"name":"Pritam"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Bunny-Editor/svg-toolkit.git"},"devDependencies":{"typescript":"^5.5.0"},"_id":"@bunny-editor/svg-toolkit@1.0.0","gitHead":"4197f71dd36bdc4d79ffa46424458af37b3fc986","bugs":{"url":"https://github.com/Bunny-Editor/svg-toolkit/issues"},"homepage":"https://github.com/Bunny-Editor/svg-toolkit#readme","_nodeVersion":"22.20.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-IZMBqNhGMv0cK4zP5vDW4YoMmd+pXwE3WbnQLFEJEIk4nXqKMZE/6QU23vNl+MyzDmfq3gu48gbAoWG1i0poZQ==","shasum":"ba5eee98467b96a2b10fba39836f3342d0a63edc","tarball":"https://registry.npmjs.org/@bunny-editor/svg-toolkit/-/svg-toolkit-1.0.0.tgz","fileCount":13,"unpackedSize":63589,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBFTp9XvwW6dHHBGpgqnTDQ7XD3azgavq+ijBMk654hUAiEAz/vXZY4ggGgBVHOmY4rrIxbe79Ci4gvCwXVOI7lb2wI="}]},"_npmUser":{"name":"theonepritam","email":"theonepritam@gmail.com"},"directories":{},"maintainers":[{"name":"theonepritam","email":"theonepritam@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/svg-toolkit_1.0.0_1775070105261_0.44696827339560397"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-01T19:01:45.118Z","1.0.0":"2026-04-01T19:01:45.414Z","modified":"2026-04-01T19:01:45.679Z"},"maintainers":[{"name":"theonepritam","email":"theonepritam@gmail.com"}],"description":"SVG path parsing, serialization, scaling, and geometry utilities","homepage":"https://github.com/Bunny-Editor/svg-toolkit#readme","keywords":["svg","path","parser","typescript","d-attribute","arc","bezier"],"repository":{"type":"git","url":"git+https://github.com/Bunny-Editor/svg-toolkit.git"},"author":{"name":"Pritam"},"bugs":{"url":"https://github.com/Bunny-Editor/svg-toolkit/issues"},"license":"MIT","readme":"# @bunny-editor/svg-toolkit\r\n\r\nParse, serialize, scale, and work with SVG paths in TypeScript.\r\n\r\n## What's in here\r\n\r\n- **Path parser** — turns SVG path `d` strings into typed command objects with named properties (`cmd.x`, `cmd.rx`, `cmd.largeArc` etc.)\r\n- **Serializer** — turns commands back into SVG strings\r\n- **Scaler** — scales path coordinates while keeping arc flags and rotation untouched\r\n- **Arc → Cubic** — converts arc segments to cubic Bezier curves\r\n- **Path points** — resolves all shorthand commands (H, V, S, T, A) to absolute cubic/line points with bounding box calculation\r\n- **Style resolver** — parses `<style>` blocks inside SVGs and resolves the cascade (specificity, selectors, combinators)\r\n\r\nNever throws on bad input. Returns what it can parse + warnings for the rest.\r\n\r\n## Install\r\n\r\n```bash\r\nnpm install @bunny-editor/svg-toolkit\r\n```\r\n\r\n## Parsing paths\r\n\r\n```ts\r\nimport { parsePath } from '@bunny-editor/svg-toolkit';\r\n\r\nconst commands = parsePath('M10 20 L30 40 A5 5 0 1 0 50 60 Z');\r\n\r\n// Every command has named properties — no more values[0], values[1]\r\nfor (const cmd of commands) {\r\n  if (cmd.type === 'M') console.log(cmd.x, cmd.y);\r\n  if (cmd.type === 'A') console.log(cmd.rx, cmd.largeArc, cmd.sweep);\r\n  if (cmd.type === 'C') console.log(cmd.x1, cmd.y1, cmd.x2, cmd.y2);\r\n}\r\n```\r\n\r\nTypeScript narrows the type automatically when you check `cmd.type`.\r\n\r\n## API\r\n\r\n### `parsePath(d: string): TypedPathCommand[]`\r\n\r\nTurns an SVG path string into a command array:\r\n\r\n```ts\r\nconst cmds = parsePath('M10 20 C1 2 3 4 5 6');\r\ncmds[0]; // { type: 'M', x: 10, y: 20, values: [10, 20] }\r\ncmds[1]; // { type: 'C', x1: 1, y1: 2, x2: 3, y2: 4, x: 5, y: 6, values: [...] }\r\n```\r\n\r\n### `parsePathDetailed(d: string): { commands, warnings }`\r\n\r\nSame thing, but also tells you about any weirdness it encountered:\r\n\r\n```ts\r\nconst { commands, warnings } = parsePathDetailed('M10 20 $ L30 40');\r\n// commands: 2 valid commands parsed\r\n// warnings: [\"Unexpected character '$' at position 7\"]\r\n```\r\n\r\n### `serializeCommands(commands): string`\r\n\r\nTurns commands back into an SVG path string. Relative/absolute is preserved.\r\n\r\n```ts\r\nconst cmds = parsePath('M10 20 l5 5');\r\nserializeCommands(cmds); // \"M10 20 l5 5\"\r\n```\r\n\r\n### `scalePath(pathData, scale): string`\r\n\r\nScales coordinates in a path string. Knows to scale arc radii but leave flags and rotation alone.\r\n\r\n```ts\r\nscalePath('M10 20 A5 5 45 1 0 30 40', 2);\r\n// \"M20 40 A10 10 45 1 0 60 80\"\r\n```\r\n\r\n## Command types\r\n\r\nAll commands have `type`, `relative`, and `values[]`. The `values` array is kept for backward compatibility — you probably want to use the named properties instead.\r\n\r\n| Command | Type | Properties |\r\n|---------|------|------------|\r\n| MoveTo | `M` | `x`, `y` |\r\n| LineTo | `L` | `x`, `y` |\r\n| HLineTo | `H` | `x` |\r\n| VLineTo | `V` | `y` |\r\n| CurveTo | `C` | `x1`, `y1`, `x2`, `y2`, `x`, `y` |\r\n| SmoothCurveTo | `S` | `x2`, `y2`, `x`, `y` |\r\n| QuadCurveTo | `Q` | `x1`, `y1`, `x`, `y` |\r\n| SmoothQuadCurveTo | `T` | `x`, `y` |\r\n| Arc | `A` | `rx`, `ry`, `xAxisRotation`, `largeArc`, `sweep`, `x`, `y` |\r\n| ClosePath | `Z` | — |\r\n\r\nArc's `largeArc` and `sweep` are booleans. Everything else is a number.\r\n\r\nSince it's a TypeScript discriminated union, `switch`/`if` on `cmd.type` narrows automatically.\r\n\r\n## Edge cases\r\n\r\nSVG path syntax has a lot of quirks. These all parse correctly:\r\n\r\n| Input | What happens |\r\n|------|--------|\r\n| `M10-5` | Negative sign starts a new number → x=10, y=-5 |\r\n| `M10.5.3` | Second dot starts a new number → x=10.5, y=0.3 |\r\n| `M1e-3,2.5E+4` | Scientific notation → x=0.001, y=25000 |\r\n| `A25 26 0 0150-25` | Compressed arc flags → flags=0,1 x=50 y=-25 |\r\n| `M10 10 20 20` | Extra params after M become L commands |\r\n| `M10,,20` | Extra commas treated as whitespace |\r\n| `M10 20 $ L30 40` | Garbage skipped, rest still parsed (with warning) |\r\n\r\n## Other modules\r\n\r\n**`geometry.ts`** — Converts SVG arcs to cubic Bezier curves. Useful if your rendering target doesn't support arcs natively (e.g. Canvas).\r\n\r\n**`path-points.ts`** — Resolves all shorthand commands (H, V, S, T) and arcs into absolute cubic/line points. Also computes bounding boxes using cubic/quadratic extrema (not just endpoint min/max).\r\n\r\n**`style-resolver.ts`** — Parses `<style>` blocks inside SVGs and resolves the cascade. Handles specificity, compound selectors, and combinators. Useful when you need to flatten styles for export.\r\n\r\n## License\r\n\r\nMIT\r\n","readmeFilename":"README.md","_rev":"1-986f1b41a19ab1bb4bb445b7772ee102"}