Skip to main content

Image & SVG

Display raster images from assets or files, and render SVG content with flexible sizing.

Image​

Display a decoded image:

widgets.Image{
    Source: myImage,  // image.Image
    Width:  200,
    Height: 150,
}

Image Properties​

PropertyTypeDescription
Sourceimage.ImageDecoded image to render
Widthfloat64Display width
Heightfloat64Display height

SvgImage​

Renders an SVG with flexible sizing:

widgets.SvgImage{
    Source:    myIcon,
    Width:     120,
    Height:    80,
    TintColor: colors.Primary,  // Optional tint
}

SvgImage Properties​

PropertyTypeDescription
Source*svg.IconLoaded SVG icon
Widthfloat64Display width
Heightfloat64Display height
TintColorgraphics.ColorOptional tint color

SvgIcon​

A convenience wrapper around SvgImage for square icons:

widgets.SvgIcon{
    Source:    myIcon,
    Size:      24,
    TintColor: colors.OnSurface,
}

SvgIcon Properties​

PropertyTypeDescription
Source*svg.IconLoaded SVG icon
Sizefloat64Width and height (square)
TintColorgraphics.ColorOptional tint color

Caching Static SVGs​

For static SVG assets (logos, icons), cache loaded icons so rebuilds reuse the same underlying SVG DOM:

var svgCache = svg.NewIconCache()

func loadIcon(name string) *svg.Icon {
    icon, err := svgCache.Get(name, func() (*svg.Icon, error) {
        f, err := assetFS.Open("assets/" + name)
        if err != nil {
            return nil, err
        }
        defer f.Close()
        return svg.Load(f)
    })
    if err != nil {
        return nil
    }
    return icon
}