Browse documentation

SVG and virtual lists

Render static SVG icons and keep large variable-height lists responsive.

SVG and List are normal elements and participate in layout, clipping, hit testing, and scene painting.

Static SVG icons

icon = Zaniah::SVG.open("assets/search.svg", color: "#d8e4f0").w(24).h(24)
icon = Zaniah::SVG.parse(
  '<svg viewBox="0 0 24 24"><path d="M4 12H20" stroke="currentColor"/></svg>'
)

The renderer supports SVG paths, basic shapes, groups, transforms, view boxes, inherited fill and stroke, currentColor, opacity, local defs/use, user-space clip paths, linear/radial gradients, stroke dash arrays and offsets, and local alpha/luminance masks. It is intended for static icons, not arbitrary web SVG.

Scripts, external references, CSS stylesheets, filters, images, text, markers, nested viewports, and object-bounding-box clips are unsupported and raise ArgumentError. Input is bounded to 2 MiB, 10,000 XML nodes, 64 levels, and 100,000 path operations; each output texture is limited to one megapixel.

SVG gradients support ordered stops, local references, objectBoundingBox and userSpaceOnUse coordinates, and the default pad spread. Other spread methods and external references remain unsupported. Masks rasterize within the same one-megapixel output limit. Gradient, dashed, and masked shapes are represented as a Vector::Raster fallback when recording; simple solid outlines remain Vector::Path commands.

Variable-height lists

rows = Zaniah::List.new(count: 1_000_000, estimated_height: 24, overscan: 2) do |index|
  Zaniah::Div.new
    .h(index.even? ? 20 : 28)
    .child(Zaniah::Text.new("Row #{index}"))
end.w(600).h(400)

rows.scroll_to(500_000, align: :center)

Give the list a viewport height. Only visible rows and the overscan margin are instantiated; other rows retain estimated heights until measured. Persistent row state belongs in keyed window state or the application model.

scroll_y= changes the pixel offset. scroll_to(index, align:) accepts :start, :center, :end, and :nearest. update_height supplies a measurement before rendering, visible_range returns the instantiated exclusive-end range, and total_height includes estimates. A list’s item count is fixed; create a new list when the count changes.

See the element declarations for the complete API.