External SVGs are not rendered

[MarkusRodler]

External SVGs are rendered into the DOM but are not visually rendered by the browser (Chrome, Edge Chromium in my case).
It appears this issue is due to the way how the DOM is updated in BrowserRenderer.ts.
This issue seems very similiar to this issue: https://github.com/aspnet/Blazor/issues/366
I did some research and it appears this is maybe the reason:

let svgElem = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
let useElem = document.createElementNS('http://www.w3.org/2000/svg', 'use');

// This
useElem.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'circle.svg#icon');
// or this
useElem.setAttributeNS('http://www.w3.org/1999/xlink', href', 'circle.svg#icon);
// seems to be missing in BrowserRenderer.ts

Describe the bug

A clear and concise description of what the bug is.

To Reproduce

Steps to reproduce the behavior:

1. Create a Blazor application
2. Create a file named circle.svg within wwwroot Folder with this content:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <symbol id="icon" fill="currentColor" viewBox="0 0 100 100">
        <ellipse cx="200" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2"/>
    </symbol>
</svg>

3. Paste the following SVG / HTML snippet into the Index page

<svg>
    <use href="circle.svg#icon"></use>
 </svg>

Expected behavior

The browser treats this as normal html with external svg and renders it properly

Actual Behavior

The browser does not display the svg.

[MarkusRodler]

I coincidentally discovered a workaround for this problem. If you add an eventhandler to the svg, then it will be rendered correctly. For example with a dummy one:

<svg @onclick="@(() => {})">
    <use href="circle.svg#icon"></use>
</svg>

It is really only a workaround, but maybe it is useful for someone else. (And I hope the issue will be fixed soon 🙏)

[christallire]

I'm having same problem too. adding event handler works as a workaround.
Thanks @MarkusRodler