pythonhtmlcssjinja2

SVG element not visible in streamlit

Below is my code with a circle inside svg element which i want to render through jinja2 using st.html in streamlit the issue is the continer is visible but svg element is not visible. it is blank. see below code.

<style>
html,body {
  height: 100%;
  background-color: #404040;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  display: flex;
  width: 500px;
  /* Extended width for pipe */
  height: 500px;
  border: 3px solid #EEEEEE;
  justify-content: center;
  align-items: center;
  border-radius: 20px;

}

.drawing {
  position: relative;
  width: 2000px;
  /* Extended width for pipe */
  height: 600px;
}

.circle-svg {
  width: 100%;
  height: 100%;
}

.c3 {
  fill: none;
  stroke: grey;
  stroke-width: 10;
}

</style>
<body>
  <div class="container">
    <div class="drawing">
      <svg viewBox="0 0 500 500" class="circle-svg">
                <!-- Circle -->
                <circle class="c3" cx="250" cy="250" r="198"></circle>
            </svg>
    </div>
  </div>
</body>

python code:

def cutting_dimention(html_content):
    # Directly use the HTML content without treating it as a file path
    template = Template(html_content)
    rendered_html = template.render()  # Render the HTML with Jinja2
    st.text(rendered_html)  # Display rendered HTML text
    st.html(rendered_html)  # Display rendered HTML as an HTML block in Streamlit

Call the function with the HTML content

cutting_dimention(my_circle)

Solution

  • I just had a play on Streamlit's playground page and noticed that st.html() will accept <p>A paragraph</p> but not your SVG tag.

    As documented, they do internal sanitizing with DOMPurify, who strips it out of your output because the <svg> tag is not in the list of accepted tags.

    I would suggest you two options:

    A. Create a component

    You could create your own Streamlit component, following the official documentation.

    B. Try to allow the <svg> tag

    I didn't see how to modify DOMPurify's config. It doesn't seem to be exposed by their API.

    So I asked Google Gemini:

    How do I configure streamlit to add the SVG tag as accepted tags in their internal DOMPurify configuration?

    It told me that one cannot modify the config directly as it is not given accessible via the API, but it also proposed to use the html component via st.components.v1.html(your_svg_code, height=110).

    I'm clearly not convinced, as it will put your SVG image inside an <iframe>, meaning that you won't be able to style it. Secondly, you'll have to set a height to this iframe, which is stupid in your case.

    So go for option A, by creating a custom component.