Include SVG image as part of markdown

Using Streamlit
1

I’m trying to include an SVG (in particular a logo) inside a markdown section. So far no success. For example:

st.markdown(
    """
![foo](logo.svg)
""",
    unsafe_allow_html=True,
)

What should be the right approach?

2

Hey @drorata :wave:,

Good question, I think the functionality in this thread is what you’re looking to achieve. Also, this is the associated gist the other thread links out to. Hope this helps!

3

The links were helpful! Thanks!

Is it planned to be included as another integrated streamlit writer?

N.B. Maybe someone would find it useful here:

def render_svg(svg_file):

    with open(svg_file, "r") as f:
        lines = f.readlines()
        svg = "".join(lines)

        """Renders the given svg string."""
        b64 = base64.b64encode(svg.encode("utf-8")).decode("utf-8")
        html = r'<img src="data:image/svg+xml;base64,%s"/>' % b64
        return html
3 Likes
4

Awesome, glad they were helpful :blush:! Yup, this is on the roadmap, here is a feature request tracking it. We’ve been playing around with it internally a bit, but don’t yet have a set timeline for when it will be rolled out. I’ll link this thread inside the above GitHub issue and we’d also love any input or more info about your use cases as well.