Why does GitHub Markdown not allow embeddings of interactive SVG animations?

[xamidi]

Select Topic Area

Question

Body

Scalable Vector Graphics (SVGs) can be animated purely with CSS such that they depend on user input (e.g. via :hover).

This would give huge potential to the customization of readme files and forum posts (in issues and discussions).

However, GitHub Flavored Markdown (GFM) doesn't allow user inputs to reach the SVG because it only supports images via <img>, but true embedding would require something like <embed> or <object> to function properly.

I doubt CSS can do anything harmful, and HTML+JS in <foreignObject><iframe> could still be sanitized away, as is already the case.

So why does GitHub disallow this? Have you considered enabling such features in a restricted way (e.g. embed only pre-sanatized local files)? Is there any security risk involved at all when allowing to embed pure SVG+CSS?

 
On another note, I think the current behavior of <object> in GFM is problematic:
Instead of at least showing the .svg file statically (via <img>), it uses the fallback image, which should be rasterized and tends to be much bigger than its vector graphics image, potentially increasing website traffic drastically.

For illustration, I created a repository at xamidi/interactive-svg-graphs.

[MDA1422]

• GitHub disallows true SVG embedding in Markdown due to security risks like CSS-based attacks, XSS vulnerabilities, and malicious SVG content. While CSS alone is safe, SVGs can include <script> or external resources, which pose risks.

• GFM only allows static images (), blocking and for security. A controlled whitelist for CSS-only SVGs could be a solution, but sanitization would be complex.

• Regarding behavior, GitHub should consider rendering static SVGs instead of relying on heavier fallback images to improve performance. 🚀

[xamidi]

You essentially only repeated what I already wrote about these things.

But according to https://quillbot.com/ai-content-detector, 100% of your comment was written by AI, so..

[github-actions[bot]]

🕒 Discussion Activity Reminder 🕒

This Discussion has been labeled as dormant by an automated system for having no activity in the last 60 days. Please consider one the following actions:

1️⃣ Close as Out of Date: If the topic is no longer relevant, close the Discussion as out of date at the bottom of the page.

2️⃣ Provide More Information: Share additional details or context — or let the community know if you've found a solution on your own.

3️⃣ Mark a Reply as Answer: If your question has been answered by a reply, mark the most helpful reply as the solution.

Note: This dormant notification will only apply to Discussions with the Question label. To learn more, see our recent announcement.

Thank you for helping bring this Discussion to a resolution! 💬

[chrdek]

If I remember correctly, markdown html embeds was allowed ONLY in the Main Profile page README.md file (The one that you have your cards and the About-me information of your profile).
Nonetheless, another alternative workaround is suggested in this repo, is called markdown-inline-svg here for svg - Did not test it yet- once functionality is confirmed will add more feedback.

ADDITIONAL UPDATES:

• Officially from github as of 2024 are mermaid diagrams for embedding interactive SVGs and diagrams, also documented here
• For PlantUML diagrams there are also options on S.OVRFLOW HERE for configuring plantuml proxy for rendering but only static content, non-interactive or animated.
• Another guide relevant to this matter is found here for draw.io.

Overall, I believe is more feasible on github wiki pages to include for documentation and on the main about README.md page for more interactive content.