Putting a Plotly graph on Medium or any website as image

I admire the effort of this article, if you want to embed a interactive graph/plot, follow the way this article shared.

How To Create a Plotly Visualization And Embed It On Websites

I found at least 2 (if not more) providers that help host your plotly on cloud and so you can embed in your website, but for me sometimes an image can serve my purpose, if the resolution is high enough.

The simplest way to get an image from a plotly is the download as image button they provided

But sometimes when the information is packed, I would expect some thing with a little bit higher resolution.

And the good thing is the Plotly graph is rendered as svg, so one can grab that and render a higher resolution image.

The way is to open up browser developer tool and find that svg tag

Highlight the plot area, you would land at the rectangle, and find the parent svg tag. The Plotly plot is composed by multiple svg tag, so some elements not be contained in this svg (like graph title, buttons…)

And then copy the element to text editor and save as an svg.

Open the svg file in browser (My computer have MS Edge browser, then what I need to do is to zoom it to a reasonable level and do a capture.

The file would be saved and I can put it up in my Medium (if you are using website, just use the svg file as you can have better quality of it and save some hustle)