svg

Inline vector graphics widget. Wraps a single svg node that rasterizes an SVG document at the element's display resolution, so it stays crisp from a 16px line icon to a 600px chart. Sizing comes from style.width / style.height; opts.fit chooses the viewBox mapping.

Exports

• svg(source: string?, opts: SvgOpts?) -> WidgetNode — module returns the builder function directly.

Options:

• id: string? — widget id.
• style: table? — passes through to the underlying node; supply width/height here, and color to ink fill="currentColor".
• fit: string? — viewBox mapping: "meet" (default, uniform + letterbox), "none"/"stretch" (fill both axes), "slice" (uniform + crop). preserveAspectRatio keywords (e.g. "xMidYMid meet") are accepted too.
• src: string? — render a .svg texture-asset reference instead of an inline source string.

Usage

local Z = require("@builtin::modules.zui")

-- Inline document; currentColor inks the element's CSS color.
Z.svg("<svg viewBox='0 0 24 24'><path d='M4 12h16' stroke='currentColor' stroke-width='2'/></svg>", {
    style = { width = 24, height = 24, color = "#3b82f6" },
})

-- From a .svg asset file.
Z.svg(nil, { src = "@builtin::icons.logo", style = { width = 64, height = 64 } })

Notes

• Stateless — returns a fresh widget table each call.
• fill="currentColor" resolves to the element's CSS color; fill/stroke gradients, the full path grammar, basic shapes, viewBox, preserveAspectRatio, and <g> grouping all render.
• Pass either an inline source string or opts.src — source is the document text, src points at a .svg asset file.
• Rasterization happens at the resolved display size, so scaling the widget re-renders sharp rather than sampling a fixed bitmap.