Description
React version: 19.1.0
Following #32001 the useId hook now generates identifiers wrapped in «» in place of :: to avoid issues in CSS selectors. However, chevrons are not allowed in the id attribute of SVG elements, which must be valid XML 1.0 names.
In practice, user agents do not enforce such a requirement and SVG renders properly, though some HTML validators will complain.
More problematic is that using outerHTML on an <svg> element in order to export it as a separate file now produces an invalid SVG document, which third party software less lenient than browsers will refuse to open. That is how I discovered the issue; the SVG files exported from my web app could no longer be imported by my image editor following the change in useId.
Link to an example: https://codesandbox.io/p/sandbox/divine-forest-my4y8w
Validating the rendered page with the Nu HTML checker gives us:
Error: Bad value «r0» for attribute id on element circle: Not a valid XML 1.0 name.
The current behavior
useId generates an id wrapped in «» which is technically not allowed in SVG element ids.
The expected behavior
useId should either produce valid XML 1.0 names, or the documentation should explicitly warn that its generated ids are not valid for foreign elements.
Workaround
As a workaround, I've wrapped useId in a function that replaces «» with a pair of underscores.