# useSvgPath

```ts
import { useSvgPath, Path } from "@pibbl/core";
```

`useSvgPath(svgPathData)` is render-only and memoizes a browser-parsed `Path2D`
until the path-data string changes. It has no separate cleanup, and browser
`Path2D` parsing behavior remains authoritative.

```tsx
function Mark() {
  const path = useSvgPath("M10 10h90v60H10z");
  return <Path style={{ d: path, fill: "#38bdf8" }} />;
}
```

See the [SVG path live example](/playground/#/examples/drawing/svg-path).

## API details from source

<span id="api-useSvgPath"></span>

Creates a memoized Path2D for an SVG data string.

```ts
useSvgPath: (svgPathData: string) => Path2D
```

Related API: [useSvgPath](/reference/hooks/use-svg-path/).

### Parameters

- **`svgPathData`** — SVG path data to parse and memoize.

### Returns

A memoized Path2D

### See also

[SvgPathOptions](/reference/types/elements-components/#svgpathoptions)

[createSvgPath](/reference/functions/create-svg-path/)

[View source — packages/core/src/lib/hooks/use-svg-path.ts:13](/source/packages/core/src/lib/hooks/use-svg-path-ts/#L13)

## Implementation guidance for agents

Read the [Drawing, layout, and effects companion](/agents/topics/layout/) for ownership, adaptation, failure modes, and verification. [Agent start](/agents/) provides the version-selection workflow.

## Complete minimal examples

- [Memoized hit paths](/minimal-examples/events/paths/): Rectangle, line, and SVG path hooks define three independent geometric click targets. [Plain source](/minimal/events/paths.tsx)
## Documentation version

Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.