OK I see now. Instead of varying the image using image_template
you could vary the css class.
Here is my CSS for visible and invisible objects:
.always-invisible {
visibility: hidden;
opacity: 0 !important;
stroke-opacity: 0 !important;
}
.always-visible {
visibility: visible;
opacity: 1 !important;
stroke-opacity: 1 !important;
}
and here is an example from ui-lovelace.yaml of where I am showing or hiding the image associated with the switch:
- action:
service: switch.toggle
entities:
- switch.study_aircon_zone
name: Switches
states:
- class: always-visible
state: 'on'
- class: always-invisible
state: 'off'
If you have the three bulb icons added to your SVG and then group them I think you should find they are invisible when the light is off but if you touch in any of the three places where the bulb is they will all become visible and the light will turn on. Will that be any good?