With inspiration from Microsoft Word. Where it is possible to create an icon and alter the properties such as color and gradiant. I was looking for a similar sollution in openhab. After some work got it up and running.
I hope this gives someone inspiration. I have published the result here: GitHub - SySfRaMe/OpenhabSVG: Create an dynamic SVG repræsentation
Currently it supports 2 color gradiant adjustment when the temperature in the boiler changes.
It is for use in the page layouts where you simply apply the custom widget.
Because you have rendered your widget as svg, you can actually skip the separate html file and just use the custom widgets to build the svg directly, This will also eliminate the need for the script section of the html because you can use widget expression right in the svg attributes.
The biggest advantage, however to moving this over to be 100% custom widget is that then you can post it to the marketplace and users can download it directly from their OH instance.
Here’s one great example of building an svg widget (with a linear gradient), if you want to take this project in that direction:
