-
-
Save treuille/8b9cbfec270f7cda44c5fc398361b3b1 to your computer and use it in GitHub Desktop.
import streamlit as st | |
import base64 | |
import textwrap | |
def render_svg(svg): | |
"""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 | |
st.write(html, unsafe_allow_html=True) | |
def render_svg_example(): | |
svg = """ | |
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> | |
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> | |
</svg> | |
""" | |
st.write('## Rendering an SVG in Streamlit') | |
st.write('### SVG Input') | |
st.code(textwrap.dedent(svg), 'svg') | |
st.write('### SVG Output') | |
render_svg(svg) | |
if __name__ == '__main__': | |
render_svg_example() |
Note 1: To ensure this works in Chrome, please make sure that your SVG namespace is correct.
Note 2: This has only been tested in Python 3.6.
Hi,
Im new to streamlit and webdev in general. How would I do this with a local svg file ?
Let's say I have a file in my local directory named "test.svg", how would I import it into this framework.
Thanks!
Edit:
Figure it out:
f = open("test.svg","r")
lines = f.readlines()
line_string=''.join(lines)
render_svg(line_string)
@Rkubinski : Awesome. Glad you got it to work!!
@treuille Nice work.
Thanks, @dariushazimi! 😊
hi, is it possible to display two svg files with the same position in streamlit?
Really helpful, Thanks you so much for sharing!
I guess SVG support has been implemented into the st.image function. Just read the SVG file and put the string as the argument.
This workaround demonstrates a method to display svg images using Streamlit. Just copy
render_svg
into your code to use it!You can also test it now with:
You will see this: