SVG examples to be embedded in static Web pages

Using Streamlit
1

Hi, I recently came across streamlit: https://www.reddit.com/r/datascience/comments/idtc8z/interaction_embed_workflow/g2mhiuu/

My aim is to produce an SVG to be embedded on a Web page.

Gnuplot can produce interactive SVG like so https://s.natalian.org/2020-08-24/interactive.svg

For example I require that mouse hover to show the values like so:

image

So my question is, can streamlit produce the sort of interactive plots I need to embed? Are there some good examples on blogs and such?

2

Hi @hendry, welcome to the Streamlit community!

svg can be implemented as follows:

import streamlit as st

st.markdown(
"""
<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>"""
, unsafe_allow_html=True)

Animated SVG uses JavaScript if I’m not mistaken, but this might be implementation-specific (I don’t know). You could try to copy the SVG example into my code above, or possibly use components.html from the Streamlit Components functionality to display:

https://docs.streamlit.io/en/stable/develop_streamlit_components.html?highlight=html#streamlit.components.v1.html