docs › guidance › svg panel

svg panel¶

goo renders vector art through the SvgPanel blob. give it a path to an imported .svg file and it fills its panel bounds with that drawing at any resolution, pixel-perfect. one optional property tints the whole image with a CSS color string.

the basics¶

import your .svg into the s&box editor first, the same way you would import a texture. then point Path at the mounted asset path. Width and Height control the rendered size. set both or use flex to fill the parent.

new SvgPanel
{
    Path   = "ui/icon.svg",
    Width  = 64,
    Height = 64,
}

omit Width and Height and the panel takes zero size, so the drawing disappears. give it explicit dimensions or let a flex parent size it via FlexGrow.

tinting with Color¶

the Color property accepts any CSS color string. the engine multiplies that color against the SVG's own pixel values, so the result is a tinted version of the art.

new SvgPanel
{
    Path   = "ui/icon.svg",
    Color  = "#6FA6DE",
    Width  = 64,
    Height = 64,
}

omit Color entirely to render the SVG's original colors untouched. pass "white" to leave the colors unchanged and control opacity through Opacity instead.

the style surface¶

SvgPanel subscribes to the sizing, margin, flex, background, opacity, and transform subsets. it does not expose padding, border, z-index, or the positioning subset. if you need absolute positioning or a z-index, wrap the blob in a Container:

new Container
{
    Position = PositionMode.Absolute,
    Left     = 20,
    Top      = 30,
    ZIndex   = 1,
    Children = { new SvgPanel { Path = "ui/icon.svg", Width = 64, Height = 64 } },
}

the full property surface SvgPanel exposes through its style facade, covering sizing, margins, flex, background, opacity, transform, and the six mouse handlers, is in the svgpanel reference.

layering SVGs with LayeredSvg¶

LayeredSvg.Of stacks multiple SVGs into a single Container. it takes a width, a height, and a params array of SvgLayer records. each layer becomes one absolutely-positioned SvgPanel inside the returned container. layers paint in array order, so later entries sit on top.

var art = LayeredSvg.Of(200, 200,
    new SvgLayer { Path = "ui/background.svg" },
    new SvgLayer { Path = "ui/icon.svg", Color = "#FF6B6B" });

each SvgLayer record carries:

member	type	purpose
`Path`	`string?`	the SVG asset path
`Color`	`string?`	optional CSS color tint
`Transform`	`PanelTransform?`	per-layer translate, rotate, or scale
`ZIndex`	`int?`	paint order, defaults to the layer's array index
`Key`	`string?`	reconciler identity when a layer moves within the list

SvgLayer also carries the same six mouse handlers as SvgPanel, so individual layers can respond to clicks independently.

the Transform property is the animation seam. drive each layer's position from your own state and call Rebuild() per frame:

float angle = _elapsed * 60f;  // degrees per second
var art = LayeredSvg.Of(200, 200,
    new SvgLayer { Path = "ui/base.svg" },
    new SvgLayer
    {
        Path      = "ui/needle.svg",
        Transform = PanelTransform.Rotate(angle),
    });

PanelTransform.Rotate(float) takes degrees. the reconciler matches layers by Key if present, or by position in the array otherwise. set a Key on any layer that might shift index between rebuilds so the engine panel survives the move rather than being destroyed and recreated.

in the wild¶

SvgPanel appears in two capstone demos you can browse for real usage patterns.

Code/Demos/ComposableHud/HotbarView.cs uses it for item icons in a hotbar. each slot holds one SvgPanel with a tint applied via Color as a CSS hex string, sized to fit a fixed slot container.

Code/Demos/TarkovInventory/TarkovStashUI.cs uses it for per-item SVG glyphs throughout the stash grid and equipment slots. items carry an Icon path and the view applies a shared tint constant.

wrapper pattern for container-only properties¶

SvgPanel does not expose BorderRadius, ZIndex, the positioning subset, or any other container-only property. the wrapper pattern from the styles article applies directly: put the SvgPanel inside a Container that carries those properties. the outer container handles layout and the inner blob handles rendering.

new Container
{
    BorderRadius = 8,
    Overflow     = OverflowMode.Hidden,
    Width        = 64,
    Height       = 64,
    Children     = { new SvgPanel { Path = "ui/icon.svg", Width = 64, Height = 64 } },
}