Widget

SVG

A custom vector graphic whose individual parts come alive with your home. Drop in a built-in object — a lamp, a fan, a water tank — or import your own SVG, then map each part to a Home Assistant entity so it changes color, fills, fades, rotates, or spins with live state.

What it does

The SVG widget draws a piece of vector art made of individually-named parts (a bulb, a shade, a level, a needle). Each part can be mapped to an entity, and a behavior decides how it reacts: a bulb tinting to its light's live LED color, a tank filling to a sensor's value, a needle rotating to a gauge reading, a fan blade spinning while it's on. Parts with no mapping just draw as-is.

Two ways to start Choose from the built-in object library (lamps, fans, appliances, water, media, vehicles, sensors, holiday decor, and more — each already split into mappable parts), or import your own SVG. Either way you get the same per-part mapping tools.

Add it

Enter edit mode, tap Add Widget, choose SVG.
Open the widget's inspector (tap the widget while editing) and tap Import SVG….
Pick from the built-in library or import a file. The art renders in a live preview.
Tap any part in the Parts list to assign an entity and choose how it reacts.

What a valid SVG needs Flux's renderer draws the basic shape elements — path, rect, circle, ellipse, line, polyline, polygon — with their fill and stroke. Parts you want to map should carry an id so they have a stable name; unnamed elements still draw and are listed by shape (e.g. "Path 3").

Mapping parts to entities

Each part is one row in the Parts list. Tap a row to open its mapping editor:

Pick the entity — choose any Home Assistant entity. If you've scoped the widget to a device (below), that device's entities appear first as a one-tap menu.
Pick the behavior — how the part reacts. The choices are filtered to what makes sense for the entity's domain (a light offers LED color and brightness fade; a sensor offers gauges and thresholds; a fan offers spin), but you can always override.
Tune it — set on/off colors, a value range, fill direction, threshold stops, angles, or opacity floors depending on the behavior.

Map many parts at once Long-press a part to Copy Assignment and paste it onto others, or to Select Multiple Parts and assign one entity + behavior to all of them in a single step — e.g. every light on a Christmas tree, or every raindrop from a shower head, controlled together.

How a part reacts (behaviors)

Behavior	What it does
On / Off Color	Part takes the On color when the entity is on, the Off color when off.
Match LED Color	While on, the part tints to the light's live `rgb_color`. Off uses the off color; a white / color-temperature-only bulb falls back to a chosen fallback color.
Fade to Dim Level	Opacity follows the light's brightness — dimming the light fades the part toward a minimum floor you set.
Gradient Color	A numeric value blends the part between a Low and High color across the value range.
Fill Level (Gauge)	A numeric value fills the part like a gauge or battery, growing from a chosen side (Bottom, Top, Left, or Right), with separate fill and empty colors.
Threshold Colors	The part takes a stop's color at or above its value (e.g. 5% red, 50% orange, 100% green). Optionally blend smoothly between stops.
Opacity by Value	A numeric value sets the part's opacity across the range, down to a minimum.
Rotate to Value (Needle)	A numeric value rotates the part to an angle — a gauge needle or a valve — between a min and max angle.
Spin When On	The part spins continuously while the entity is on; with a value range set, higher values spin it faster (e.g. fan speed). A speed multiplier (0.1×–5×) sets the overall pace.
Pulse When On	The part pulses its opacity while on, in a chosen color — for alerts or activity.
Hide When Off	The part disappears whenever the entity is off or zero.

Value range & attributes Value-driven behaviors (gradient, fill, opacity, rotate, spin) map the entity's number from a Min→Max you set. By default that's the entity's state; enter an attribute name (e.g. battery_level) to read that instead.

Scope to a device (optional)

In the SVG editor you can scope the widget to a device. That puts the device's entities at the top of every part's entity picker as a one-tap menu, so mapping the parts of, say, a fan to that fan's entities is fast. It never limits you — any entity can still be chosen per part.

Cleaning up the art

Hide parts — tap the eye on any part to remove it from the rendering (e.g. a background you don't want).
Force fill outline-only shapes — a repair toggle that fills parts that were drawn as outlines but should appear solid.

How a tap works

Tapping the widget controls the first mapped part's entity — preferring a toggleable one — so a mapped object is interactive automatically. If that entity can toggle (a light, switch, fan…) the tap toggles it; otherwise the tap opens its detail view. A universal When tapped override (set on the widget) takes precedence over this default.

The art is the indicator Even when nothing is mapped to a tap target, the part mappings keep the graphic in sync with live state — color, fill, and motion all follow your entities whether or not you ever tap.

Settings

Option	What it does
Import / Edit SVG	Opens the SVG editor to choose a library object or import a file, then map, hide, and repair its parts.
Tint to theme	Flattens the whole graphic to a single accent-colored silhouette that follows the page theme.
Rotate	Rotates the whole artwork 0–360° (with a quick Rotate 90° button) to orient an imported file.
Force fill outline-only shapes	Repair toggle — fills parts that are outlines but should appear solid. (In the SVG editor.)
Device	Optional device whose entities are offered first in each part's entity picker. (In the SVG editor.)

Drawing limits Flux renders SVG shapes, fills, and strokes with transforms — it isn't a full browser SVG engine. Gradient defs, filters, embedded images, text, and clip paths from imported files may not render. The built-in library is authored to render reliably.