> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hyperwisor.com/llms.txt
> Use this file to discover all available pages before exploring further.

# SVG

> Display a scalable vector graphic.

<Info>
  **Category:** Display · **Reads data:** yes (URL) · **Sends commands:** no
</Info>

## Mental model

An **SVG widget is a scalable icon.** Like the [Image](/dashboard/widgets/image)
widget, but for vector graphics — crisp at any size, ideal for icons, logos, and
diagrams.

## When to use it

* Sharp icons/logos that scale without blur
* Vector diagrams

## Settings

### General / Data

* **Widget Title / ID** · **SVG URL** · **Alt text**

### Style

* **SVG fit** · **alignment** · **padding** · **opacity** · **CSS filter** · border

## Script API example

The same interactions from a [dashboard script](/script/overview):

```js theme={null}
widget.on('logoSvg', 'hover', () => widget.setText('hint', 'Click for details'));
widget.on('logoSvg', 'click', () => widget.show('detailPanel'));
```

<Card title="Image" icon="image" href="/dashboard/widgets/image">
  For raster images (PNG/JPG).
</Card>