SVG ID conflict

[HotariTobu]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

Referenced SVG elements conflict when rendering multiple SVG images as React components.

This is because minifying SVG images can result in duplicate element IDs.

SVG elements in the second or later SVG images are hidden by the first.

Reproducible demo

https://stackblitz.com/edit/github-cf8uy1ck?file=src%2Fpages%2Findex.md

Steps to reproduce

1. create 2 SVG images that include an element with ID and an element referring
2. import the SVG images as React components
3. render the React components on the same page

Expected behavior

All SVG elements have unique IDs and SVG images are displayed as same as when alone.

Actual behavior

Some elements are hidden or have a different style when SVG element IDs conflict.

Your environment

• Public source code: https://stackblitz.com/edit/github-cf8uy1ck
• Public site URL: https://stackblitz.com/edit/github-cf8uy1ck
• Docusaurus version used: 3.7.0
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Chrome 133, Node.js v18.20.3
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Windows 11

Self-service

• I'd be willing to fix this bug myself.