Inline SVGs are not rendered

[Suchiman]

Inline SVGs are rendered to into the DOM but are not visually rendered by the browser.
It appears this issue is due to the way how the DOM is updated in BrowserRenderer.ts.
I did some research and it appears this is the reason https://stackoverflow.com/questions/41161094/dynamically-created-svg-elements-are-not-rendered-by-the-browser

Minimal repro steps

1. Create a Blazor application
2. Paste the following SVG / HTML snippet into the Index page

<svg xmlns="http://www.w3.org/2000/svg" height="140" width="500">
    <ellipse cx="200" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
    Sorry, your browser does not support inline SVG.
</svg>

Expected result

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

Actual result

The browser displays Sorry, your browser does not support inline SVG. due to the way how the DOM is updated

[danroth27]

Thanks for bringing this to our attention!

[AdrienTorris]

I have the same issue. I think it's because the attributes are not computed.

[sjroe]

I have encountered the same issue and a quick play with the JS via Chrome dev tools suggests that the small below modification in Rendering/BrowserRenderer.ts resolves the issue:

insertElement(componentId: number, parent: Element, childIndex: number, frames: System_Array<RenderTreeFramePointer>, frame: RenderTreeFramePointer, frameIndex: number) {
  const tagName = renderTreeFrame.elementName(frame)!;
  const newDomElement = tagName === 'svg' || parent.namespaceURI === 'http://www.w3.org/2000/svg' ?
    document.createElementNS('http://www.w3.org/2000/svg', tagName) :
    document.createElement(tagName);
  insertNodeIntoDOM(newDomElement, parent, childIndex);
...

[sjroe]

Additionally, SVG based components do not render due to the blazor-component wrappers. A quick fix for this is to modify the insertComponent function in Rendering/BrowserRenderer.ts to utilize a g tag when we're in an SVG tree:

const containerElement = parent.namespaceURI === 'http://www.w3.org/2000/svg' ?
    document.createElementNS('http://www.w3.org/2000/svg', 'g') :
    document.createElement('blazor-component');

The comments suggest that the blazor-component wrappers are a temporary solution and will one day be removed.

[AdrienTorris]

@sjroe Yes I also saw that the blazor-component will disappear, I didn't see when however. I will test your workarounds, thank's.

[SteveSandersonMS]

Resolved in dotnet/blazor#435