Appearance
SVG Drawing
A vector drawing built from a data-described element tree, with per-element bindings.
In Studio
In Studio, double-click SVG Drawing in the Components category of the Components panel. It is added to the open view, where you can drag it into place.
When to use
Use SVG Drawing for custom vector artwork — an imported P&ID symbol, a mimic diagram — where individual shapes need their own bound colors, positions, or visibility.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| View Box | String | 0 0 200 200 | The SVG viewBox the element tree is drawn in. |
| Preserve Aspect Ratio | xMidYMid meet, none, xMinYMin meet, xMaxYMax meet | xMidYMid meet | How the drawing scales to fit the component box: xMidYMid meet (default, centered, whole drawing visible), none (stretches to fill, ignoring aspect ratio), xMinYMin meet, or xMaxYMax meet. |
Binding
This component has no single value binding.
No single value binding — any element's own properties (fill, stroke, visibility, position) can be bound individually in the element tree, editable in Studio's SVG editor.
Safety
The element tree is sanitized against an allow-list before it is ever rendered — an unsupported or unsafe node is dropped rather than executed. SVG markup is never injected into the page as raw HTML.