Adding an SVG image (and listen to events on the image)

Sorry, there might be a little confusion here but I am not sure. Your best bet is to basically put your svg and javascript inside an iframe and have the JavaScript executed therein. The html function does that all for you. If you inspect the streamlit app in your browser, you can see that the html function puts your svg (and javascript) inside an iframe.

The Streamlit app still has the ability to change/control the contents of the iframe in the normal way which is to change it on rerun (remember, the python script is the backend) but the difficult part is to have the svg affect the rest of the app on the frontend. For this to be achieved, the iframe or component containing the iframe must communicate back to the backend script (Streamlit script) which then makes appropriate changes to the app frontend. So the iframe/component must send info back to the Streamlit script (like say when an svg element is clicked) so that the script can then change the app accordingly.

As far as I know, the html function that I recommended does NOT have bidirectional functionality (it doesnt return anything for you to respond to ie it doesnt talk back to the script; it just adds the content you give it wrapped in an iframe). However, the 3rd party component that I referenced (streamlit-javascript) apparently does have this ability. Which means you can send back “results” which could be the name of the element you clicked in your case for example which the script can then respond to. The problem with this 3rd party component is that it ONLY executes javascript so it probably isnt what you are looking for.

I have some good news and bad news. The good news is that if you understand how components communicate back to the backend, then you can do so with not too much additional javascript and python code. The bad news is that its not super intuitive and I dont remember the details myself. Just that its done using window.parent.postMessage.

You might find more info/clues in posts like this and this and this

Hopefully all this makes a little more sense.