Shape Item

Renders an SVG-based vector shape on the canvas. Supports fill, stroke, and shadows.

Creating a Shape Item

const { addItem } = useStudio()

addItem('Shape', {
  x: 100,
  y: 100,
  width: 200,
  height: 200,
  itemProps: {
    svgPath: 'M 100 10 L 190 190 L 10 190 Z', // triangle
    viewBox: { x: 0, y: 0, w: 200, h: 200 },
    fill: '#7c3aed',
  },
})

Properties

All properties below are passed inside itemProps.

Property	Type	Description
svgPath	string	SVG path data string (d attribute). Required.
viewBox	{ x: number; y: number; w: number; h: number }	The viewBox of the SVG the path was taken from. Required.
fill	string	Fill color (hex). Required.
stroke	string	Stroke color.
strokeWidth	number	Stroke thickness in pixels.
shadowEnabled	boolean	Enable or disable the shadow.
shadowColor	string	Shadow color.
shadowBlur	number	Shadow blur radius.
shadowOffsetX	number	Shadow horizontal offset.
shadowOffsetY	number	Shadow vertical offset.

Notes

• The svgPath is scaled using viewBox to fit the item's width and height.
• For complex shapes, export SVG path data from a vector editor (Figma, Illustrator, Inkscape) and use the file's viewBox values.