Well, that’s embarrassing! I just learned what the problem was. Perhaps, it can help someone later.
After trying different SVG tags, I realized the problem was with the way the tags were typed. For instance, this one worked just fine:
<svg height="210" width="500">
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
While my own which was much larger failed. That was because the opening tag of SVG had newlines in it. This is the one that fails to render after being embedded:
<svg
width="56.979057mm"
height="56.294029mm"
viewBox="0 0 56.979057 56.294029"
version="1.1"
id="svg5"
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
sodipodi:docname="precision_recall.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
...
As you can see, the opening tag for SVG is spread across multiple lines and when embedded, it will not render.