Convert Animated SVG to PNG

Question

The code with the issue: https://sololearn.com/compiler-playground/WxnBIAgCO44j/?ref=app

It renders graphics using turtle from Python in webpage using Brython. Problem is when I click download button to download the PNG, it is just a completely black/empty image. None of the drawing is there on it.
I did try clicking download only after the animation has fully finished, but that still doesn't change anything about it.

After checking the DOM update as the render happened, I realized it's because of the SVG having <animate> tags do the whole drawing. Converting to PNG reverts the action and effect of the <animate> tags, so only the black background is there and all the drawing is removed.
So how can I instead download the final static version of the SVG as the PNG image instead? Can someone please help?

Answer 1

Aysha It explains about Static SVG, which I have no issue with. The problem is about SVGs which use the <animate> tag

Answer 2

Aysha, Bob_Li Yes it was a frustrating issue, but I finally got my script working and it captures the final state of animated SVG as I wanted

Answer 3

Aysha It may be possible, but I'm going for more of an ease of experience by converting it via JavaScript directly, to give users an option to download.

Answer 4

Afnan Irtesum Chowdhury
yes, it looks like a hard problem.
why not just do a screenshot capture?

Answer 5

Afnan Irtesum Chowdhury congratulations for your working script.

Answer 6

I found this on stack overflow I hope this will help you download in the png format.

https://stackoverflow.com/questions/3975499/convert-svg-to-image-jpeg-png-etc-in-the-browser

Answer 7

Afnan Irtesum Chowdhury I thought it's for an animated tag. Why don't you try to download it in svg format then try an online tool to get converted in png in an animated manner.

Answer 8

Afnan Irtesum Chowdhury it's really a good idea. I hope you find the solution for it soon

Answer 9

hi