SVG animates aren't rendered properly

Product Support

AI-generated summary

User aas reports that SVG animations aren’t rendering properly when uploaded to Discourse, despite displaying correctly when viewed directly in a browser or on GitHub. The issue appears to stem from Discourse stripping out <defs> content during upload, specifically because the symbol tag is not whitelisted in the upload sanitizer as noted by Arkshine. Arkshine confirms the problem, provides visual evidence of the stripped content, and submits a PR to allow symbol in SVG uploads, suggesting there’s no security concern in doing so. The fix appears to resolve the rendering issue, as shown in the follow-up GIF.

1

I upload this .svg to my post as I would any other image

In a lush garden, a majestic peacock with vibrant feathers, predominantly in hues of blue and green, stands stately among blooming flowers and swaying trees, its head raised elegantly as it showcases its elaborate plumage. (Captioned by AI)
In a lush garden, a majestic peacock with vibrant feathers, predominantly in hues of blue and green, stands stately among blooming flowers and swaying trees, its head raised elegantly as it showcases its elaborate plumage. (Captioned by AI)6231×347 74.9 KB

Here is what I see in the preview:

CleanShot 2025-05-19 at 09.47.30@2x
CleanShot 2025-05-19 at 09.47.30@2x2934×796 215 KB

If I open the .svg directly in my browser (visit https://raw.githubusercontent.com/marionebl/svg-term-cli/refs/heads/master/examples/parrot.svg) or view it on GitHub (here in the README.md for example: GitHub - marionebl/svg-term-cli: Share terminal sessions via SVG and CSS · GitHub), it is rendered properly.

.svg is enabled as an upload type and I don’t think there is an issue with the size of the .svg.

3

I took a quick look, and it seems that after uploading an SVG, the content inside <defs> is gone.

The image shows the interface of an XML or SVG editor with code snippet on the left and a rendered result on the right. (Captioned by AI)
The image shows the interface of an XML or SVG editor with code snippet on the left and a rendered result on the right. (Captioned by AI)1777×464 82.2 KB

symbol is not on the whitelist, that’s the reason:

Now, it works:

The image shows a Telegram download link in the chat with the filename "parrot(1)6231x0 (upload://fKaLFUt9RBvAWJoEpo5TVv0)", leading to a direct link to a hidden cdc file segment. (Captioned by AI)

I don’t think there is an issue in allowing it. :thinking:

Made a quick PR:

https://github.com/discourse/discourse/pull/32806