I’ve want to display an SVG image in an Image component, but Anvil is showing it as “broken”.
The demo app linked to below, generates a Plotly.express figure, converts it to an SVG image using kaleido, converted that to a media object and saved that object to a data table. A second, PNG format image was generated from the same figure and saved using the same code (only the graphic format differing.) But while the PNG image displays fine, the SVG does not.
I’ve downloaded the SVG file from the data table and successfully opened it in Chrome, Edge, and Brave, as well as Inkscape and Gimp, without issue – so I don’t think that the file is the problem.
Published app:
Clone link:
I have no idea if/how to get it done through an image component so I made a custom component with custom html to contain the actual content of the svg. I then made another custom component to let you do either png or svg:
1 Like
Thank you very much, @duncan_richards12, for taking time to make and share this.
I haven’t previously worked with custom components and – having just read the docs – I think that they’re a bit beyond my skill level at present.
Would you be able and willing to add a couple more properties to your SvgContainer component, so that it more closely conforms to the functionality of Anvil’s Image component? (I’m thinking specifically about selecting a Display Mode and setting Vertical and Horizontal alignments and Height.)
I will, of course, understand if that isn’t something you care to take on.
I was easily able to add the height and width properties, but the display_mode prop wasn’t something I understand – at least for the svg mode. I don’t know near enough about SVG’s nor the display mode prop to apply it to the SVG container.
However, its super easy for you to apply that to the anvil image only – just add a custom display_mode prop to the custom comp and basically shadow the image component’s display mode:
I was easily able to add the height and width properties, but the display_mode prop wasn’t something I understand – at least for the svg mode:
I don’t know near enough about SVG’s nor the display mode prop to apply it to the SVG container. However, its super easy for you to apply that to the anvil image only – just add a custom display_mode prop to the custom comp and basically shadow the image component’s display mode:
1 Like
I understand, @duncan_richards12, and appreciate your help getting me part way to the goal.
I will hold off on marking your last post as a Solution for now, in the hope that the folks at Anvil will address the Image component’s lack of support for SVG format files next week.
Thanks again!
1 Like
It occurred to me that maybe you could enocde the svg content and set that as the source of just a normal image component. I have updated the clone to also have that option, but I’m not sure which is more performant.
1 Like
Thank you very much @duncan_richards12!
The encode-svg-as-a-string approach that you’ve provided would never have occurred me, and – after a few minutes of trying – I don’t understand why it works.
But I’ve incorporated your approach into my own code (not the Demo that I ginned up to demonstrate the problem), and can now load my (encoded) svg files into a standard Anvil Image container.
Thanks again!
No problem, glad I could help! The only reason I thought of it is because I learned you could do this for a variety of html elements like img elements with png/jpeg images and with video elements as well from making pdfs with ChatGPT 
I think the basic reason any of them work is that you are manually setting the bytes/content in a specifically data format rather than a source location format.
1 Like