fix(image export): TBD flags rendering

[Eetwalt]

Summary

Discord: https://discord.com/channels/93055209017729024/372075546231832576/1470388912424882299

html2canvas has problems rendering svg images in tags, which causes issues for TBD flags.

This PR replaces the TBD flag tags with inline SVG to render the flags properly.

Another option would be to remove the flags from image completely, but I think they look visually nice so figured to keep them.

How did you test this change?

Dev tools

Before:

After:

[Copilot]

Pull request overview

This PR fixes an issue where TBD (To Be Determined) flags don't render properly in image exports. The problem occurs because html2canvas has limitations rendering SVG images embedded in <img> tags. The solution replaces TBD flag <img> elements with inline SVG elements during the export process.

Changes:

• Added a new SVG constant containing the inline SVG markup for the unknown flag
• Implemented replaceTBDFlags() method to convert TBD flag img elements to inline SVG during export
• Integrated the new method into the existing export preparation workflow

Comments suppressed due to low confidence (1)

javascript/commons/ExportImage.js:22

• The SVG path data string is split across multiple lines with a leading comma on line 22. While syntactically valid, starting a line with a comma in a string concatenation reduces readability. Consider moving the comma to the end of line 21 for better clarity.

			'.49.07l-.63-.51c-.15-.13-.18-.35-.07-.51.6-.92,1.35-1.45,2.52-1.45h-.01c1.24-.01,2.56,1.03,2.56,2.42' +
			',0,1.84-1.82,1.86-1.82,2.55Z"/>'

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The SVG element should be created using clonedDoc.createElementNS instead of document.createElementNS to ensure the element is created in the correct document context. While the element may work when adopted into clonedDoc during insertion, creating it in the correct document context from the start is more robust and follows best practices for DOM manipulation across document boundaries.

Suggested change

	const svg = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' );
	const svg = clonedDoc.createElementNS( 'http://www.w3.org/2000/svg', 'svg' );

[mbergen]

Alternative:
We upload and use the flag as PNG.
The usage (and thus requirements regarding resolution) is limited by all the other flags, so a constant resolution isn't going to be an issue.

[Rathoz]

Does one of the alternative libraries you investigated support svg's?
There will be a lot of svg's in the future, so I think it's better to do a long term fix.

[Eetwalt]

Does one of the alternative libraries you investigated support svg's? There will be a lot of svg's in the future, so I think it's better to do a long term fix.

https://github.com/zumerlab/snapdom

There's no mention that it wouldn't be supported, but it's not listed as non-supported for html2canvas either so hard to say without testing.

Sure switching libraries is better long term solution, but not sure if we can/want to do it now?