Added SVG support (#366) (#435)

* Added SVG support (#366)

* Added E2E tests for SVG

src/Microsoft.AspNetCore.Blazor.Browser.JS/src/Rendering/BrowserRenderer.ts

@@ -115,7 +115,9 @@ export class BrowserRenderer {
 
   insertElement(componentId: number, parent: Element, childIndex: number, frames: System_Array<RenderTreeFramePointer>, frame: RenderTreeFramePointer, frameIndex: number) {
     const tagName = renderTreeFrame.elementName(frame)!;
-    const newDomElement = document.createElement(tagName);
+    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);
 
     // Apply attributes
@@ -149,7 +151,9 @@ export class BrowserRenderer {
     //   (counting child components as a single item), so N will rarely if ever be large.
     //   We could even keep track of whether all the child components happen to have exactly 1
     //   top level frames, and in that case, there's no need to sum as we can do direct lookups.
-    const containerElement = document.createElement('blazor-component');
+    const containerElement = parent.namespaceURI === 'http://www.w3.org/2000/svg' ?
+      document.createElementNS('http://www.w3.org/2000/svg', 'g') :
+      document.createElement('blazor-component');
     insertNodeIntoDOM(containerElement, parent, childIndex);
 
     // All we have to do is associate the child component ID with its location. We don't actually

test/Microsoft.AspNetCore.Blazor.E2ETest/Tests/ComponentRenderingTest.cs

@@ -228,5 +228,29 @@ namespace Microsoft.AspNetCore.Blazor.E2ETest.Tests
             externalComponentButton.Click();
             Assert.Equal("It works", externalComponentButton.Text);
         }
+
+        [Fact]
+        public void CanRenderSvgWithCorrectNamespace()
+        {
+            var appElement = MountTestComponent<SvgComponent>();
+            
+            var svgElement = appElement.FindElement(By.XPath("//*[local-name()='svg' and namespace-uri()='http://www.w3.org/2000/svg']"));
+            Assert.NotNull(svgElement);
+
+            var svgCircleElement = appElement.FindElement(By.XPath("//*[local-name()='circle' and namespace-uri()='http://www.w3.org/2000/svg']"));
+            Assert.NotNull(svgCircleElement);
+        }
+
+        [Fact]
+        public void CanRenderSvgChildComponentWithCorrectNamespace()
+        {
+            var appElement = MountTestComponent<SvgWithChildComponent>();
+            
+            var svgElement = appElement.FindElement(By.XPath("//*[local-name()='svg' and namespace-uri()='http://www.w3.org/2000/svg']"));
+            Assert.NotNull(svgElement);
+
+            var svgCircleElement = appElement.FindElement(By.XPath("//*[local-name()='circle' and namespace-uri()='http://www.w3.org/2000/svg']"));
+            Assert.NotNull(svgCircleElement);
+        }
     }
 }

test/testapps/BasicTestApp/SvgCircleComponent.cshtml

@@ -0,0 +1 @@
+<circle cx="125" cy="125" r="100" fill="red" stroke="black" stroke-width="3" />

test/testapps/BasicTestApp/SvgComponent.cshtml

@@ -0,0 +1,3 @@
+<svg height="250" width="250">
+    <circle cx="125" cy="125" r="100" fill="red" stroke="black" stroke-width="3" />
+</svg>

test/testapps/BasicTestApp/SvgWithChildComponent.cshtml

@@ -0,0 +1,5 @@
+<h1>SVG with Child Component</h1>
+
+<svg height="250" width="250">
+    <SvgCircleComponent />
+</svg>

test/testapps/BasicTestApp/wwwroot/index.html

@@ -24,6 +24,8 @@
       <option value="BasicTestApp.HttpClientTest.HttpRequestsComponent">HttpClient tester</option>
       <option value="BasicTestApp.BindCasesComponent">@bind cases</option>
       <option value="BasicTestApp.ExternalContentPackage">External content package</option>
+      <option value="BasicTestApp.SvgComponent">SVG</option>
+      <option value="BasicTestApp.SvgWithChildComponent">SVG with child component</option>
       <!--<option value="BasicTestApp.RouterTest.Default">Router</option> Excluded because it requires additional setup to work correctly when loaded manually -->
     </select>
     &nbsp;