Shape

Low-level geometry primitive resolved into an internal SVG fragment before layout.

No children allowed.

Props

Prop	Type	Required	Description
geometry	GeometryDoc	Either	Inline geometry document
geometryId	string	Either	Engine registry key for a preloaded geometry
width	number	Yes	Display width in px
height	number	Yes	Display height in px
fill	string		Default fill applied to emitted geometry
stroke	string		Default stroke applied to emitted geometry
strokeWidth	number		Stroke width
fillRule	"nonzero" | "evenodd"		Default fill rule
strokeLinecap	"butt" | "round" | "square"		Stroke line cap
strokeLinejoin	"miter" | "round" | "bevel"		Stroke line join
strokeDasharray	string		Stroke dash pattern
strokeMiterlimit	number		Stroke miter limit
preserveAspectRatio	"none" | "meet" | "slice"		How to fit the geometry into the display box
opacity	number		Opacity (0–1)
zIndex	number		Sibling-local paint order (integer; higher paints later)
meta	Record<string, string>		Metadata emitted as data-boundsvg-meta-* attributes and into the layered manifest (max 16 keys, [a-z][a-z0-9-]{0,31} keys, 256-char values)
emitPartIds	boolean		Emit one path per addressable geometry part tagged with data-boundsvg-part-id (opt-in; overlapping parts paint separately)
transform	Transform2D		Static post-layout paint transform
animate	AnimationSpec		Declarative opacity/transform track; see Animation
margin	number | [number, number, number, number]		Margin
partPaint	Record<string, PartPaintOverride>		Per-part fill/stroke overrides keyed by part id. Splits the geometry into parts on its own; emitPartIds is only needed to also emit the data-boundsvg-part-id attributes
layer	string		Layer id for Layered Export. Always rendered as an atomic island

Also accepts the same positioning, flex item, grid item, event, and id props as Svg.

Example

import { Canvas, Shape, type GeometryDoc } from "@boundsvg/core";

const badge: GeometryDoc = {
  viewBox: { width: 140, height: 64 },
  root: {
    kind: "path",
    d: "M12 0H128C134.627 0 140 5.373 140 12V52C140 58.627 134.627 64 128 64H12C5.373 64 0 58.627 0 52V12C0 5.373 5.373 0 12 0Z",
  },
};

<Canvas width={220} height={120} background="#0f172a">
  <Shape geometry={badge} width={180} height={82} fill="#38bdf8" />
</Canvas>;

Generated SVG

<svg xmlns="http://www.w3.org/2000/svg" data-boundsvg-node-id="auto:0" viewBox="0 0 220 120" width="220" height="120">
  <rect x="0" y="0" width="220" height="120" fill="#0f172a"/>
  <g data-boundsvg-node-id="auto:0.0">
    <svg data-boundsvg-node-id="auto:0.0" x="0" y="0" width="180" height="82" overflow="hidden">
      <path d="M15.43,0L164.57,0C173.09,0 180,6.88 180,15.38L180,66.63C180,75.12 173.09,82 164.57,82L15.43,82C6.91,82 0,75.12 0,66.63L0,15.38C0,6.88 6.91,0 15.43,0Z" fill="#38bdf8"/>
    </svg>
  </g>
</svg>