Dynamic link to svg icon in href in a widget


I would like to use the state of an item to determine which SVG icon to show in a widget. How is it possible to get an item state in here:

<use xlink:href="/static/Icons/weather.svg#Yr_[ITEM STATE GOES HERE]">

The item in question returns N, S and so on, and my icons in the SVG file are named Yr_N, Yr_S …

Kind regards,

Two options,
Change your item to be Tr_N, Yr_N…
Or create a String item and a rule:

    Item Item1 changed
    svgString = "/static/Icons/weather.svg#Yr_" + Item1.state.toString

Thanks for the quick reply!

What is the correct way to reference the value of svgString in the href?

I am not too sure…
Front another thread we have:

<div><span ng-show="itemValue('Lampe')"></span></div>

That seems to call the item value
But I don’t have any experience with html :frowning:

<use xlink:href={{itemValue('testURL')}}></use>

Did the trick! Thanks.

If someone has a method of using AngularJS or something similar without creating a new string item, please let me know :slight_smile:

Here it is :wink:

<use xlink:href="{{'/static/Icons/weather.svg#Yr_' + itemValue('Condition') }}"></use>

where ‘Condition’ is your itemname

Bye Lorenzo

Thanks! :kissing_heart:


I have a similar “problem”.
I have created different .svg-files and i want to embed them also according to a itemvalue.
i already achieved that by using:
img src but I lose the ability to format the svg’s in my code by doing it this way.
I’d love to use xlink:href but somehow i can’t get it to work.
I appended .svg at the end and my link now looks like this:

<use xlink:href="/static/icons/{{itemValue('Condition')}}.svg"></use>

But unfortunately that does not work.

maybe you shouldtry:

<use xlink:href="{{'/static/Icons/' + itemValue('Condition') + '.svg' }}"></use>


1 Like

Thanks i will try it.
But i chose to merge the icons into the one big .svg and go with the solution written above because i feel it’s “cleaner” :slight_smile:

that ‘picking one icon, out of a set from only one svg file’-part, is one of the parts in openhab that i don’t understand and i don’t find examples howto (make one svg file with many svg files in, address the icons, show them) maybe i don’t use the right spelling while i search…
but if i where able to address this i would try:

<use xlink:href="{{ '/static/Icons/' + itemValue('mySVGFile') + 'commandToPickIcon' + itemValue('Condition' }}"></use>

where commandToPickIcon is the Syntax i don’t know and in this possible solution i would fill another item (mySVGFile) with the string of the SVG-File to select from…


Just follow the link to github and read the instructions. :slight_smile:
He also uploaded a python script to merge several .svg’s

after merging you can adress them by using the hashtag.
for example: test.svg#icon1 depending on the item name you define in the single svg.

lol, the # is the commandToPickIcon (thanks a lot)
Sure i start read this, but i don’t want to install python (i am a typical win user) , that’s why i don’t complete reading till the end :frowning:
then this should work:
<use xlink:href="{{ '/static/Icons/' + itemValue('mySVGFile') + '.svg#' + itemValue( 'Condition')}}"></use>

or if you use only one SVG-File:
<use xlink:href="{{ '/static/Icons/mySVGFile.svg#' + itemValue( 'Condition' )}}"></use>

i got this working by now, thank you!
You can also merge them manually as i did (< 10 icons).