# createSvgPath

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

[`SvgPathOptions`](/reference/types/elements-components/#svgpathoptions) is accepted by `createSvgPath(options): Path2D`, which returns a fresh `Path2D` from
SVG path data. Browser parsing is authoritative; the function is pure and does
not install rendering, interaction, or caching behavior.

```tsx
<Path
  style={{ d: createSvgPath({ d: "M10 10h80v50H10z" }), fill: "#38bdf8" }}
/>
```

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

## API details from source

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

Creates a Canvas Path2D for svg geometry from validated options.

```ts
createSvgPath: (options: Readonly<SvgPathOptions>) => Path2D
```

Related API: [createSvgPath](/reference/functions/create-svg-path/), [SvgPathOptions](/reference/types/elements-components/#svgpathoptions).

### Parameters

- **`options`** — SVG path data to parse. See [SvgPathOptions](/reference/types/elements-components/#svgpathoptions).

### Returns

A native Canvas path parsed from the supplied data.

### See also

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

[View source — packages/core/src/lib/geometry/svg-path.ts:22](/source/packages/core/src/lib/geometry/svg-path-ts/#L22)

## 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

- [Line and SVG paths](/minimal-examples/paths/line-svg-factories/): Construct a polyline and an SVG path from authored coordinates. [Plain source](/minimal/paths/line-svg-factories.ts)
## Documentation version

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