From 15a69e52f4b5e5cf988f1344b15a5403fb79ea28 Mon Sep 17 00:00:00 2001
From: guardrex <1622880+guardrex@users.noreply.github.com>
Date: Mon, 12 Jul 2021 10:31:54 -0500
Subject: [PATCH 1/2] Blazor SVG

---
 aspnetcore/blazor/components/index.md | 44 ++++++++++++++++++++++++++-
 1 file changed, 43 insertions(+), 1 deletion(-)

diff --git a/aspnetcore/blazor/components/index.md b/aspnetcore/blazor/components/index.md
index 8de35bf1981c..aa91fd3d3a0f 100644
--- a/aspnetcore/blazor/components/index.md
+++ b/aspnetcore/blazor/components/index.md
@@ -1288,7 +1288,49 @@ Similarly, SVG images are supported in the CSS rules of a stylesheet file (`.css
 }
 ```
 
-However, inline SVG markup isn't supported in all scenarios. If you place an `<svg>` tag directly into a Razor file (`.razor`), basic image rendering is supported but many advanced scenarios aren't yet supported. For example, `<use>` tags aren't currently respected, and [`@bind`][10] can't be used with some SVG tags. For more information, see [SVG support in Blazor (dotnet/aspnetcore #18271)](https://github.com/dotnet/aspnetcore/issues/18271).
+::: moniker range=">= aspnetcore-6.0"
+
+SVG supports the `<foreignObject>` element to display arbitrary HTML within an SVG. The markup can represent arbitrary HTML, a <xref:Microsoft.AspNetCore.Components.RenderFragment>, or a Razor component.
+
+The following example demonstrates:
+
+* Display of a `string` (`@message`).
+* Two-way binding with an `<input>` element and a `value` field.
+* A `Robot` component.
+
+```razor
+<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
+    <rect x="0" y="0" rx="10" ry="10" width="200" height="200" stroke="black" 
+        fill="none" />
+    <foreignObject x="20" y="20" width="160" height="160">
+        <p>@message</p>
+    </foreignObject>
+</svg>
+
+<svg xmlns="http://www.w3.org/2000/svg">
+    <foreignObject width="200" height="200">
+        <label>
+            Two-way binding:
+            <input @bind="value" @bind:event="oninput" />
+        </label>
+    </foreignObject>
+</svg>
+
+<svg xmlns="http://www.w3.org/2000/svg">
+    <foreignObject>
+        <Robot />
+    </foreignObject>
+</svg>
+
+@code {
+    private string message = "Lorem ipsum dolor sit amet, consectetur adipiscing " +
+        "elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
+
+    private string value;
+}
+```
+
+::: moniker-end
 
 ## Whitespace rendering behavior
 

From c3758f1fa05768316bcdd7b4eb7f81c1325a3fa0 Mon Sep 17 00:00:00 2001
From: guardrex <1622880+guardrex@users.noreply.github.com>
Date: Mon, 12 Jul 2021 10:33:43 -0500
Subject: [PATCH 2/2] Updates

---
 aspnetcore/blazor/components/index.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/aspnetcore/blazor/components/index.md b/aspnetcore/blazor/components/index.md
index aa91fd3d3a0f..391b702e40d2 100644
--- a/aspnetcore/blazor/components/index.md
+++ b/aspnetcore/blazor/components/index.md
@@ -1274,7 +1274,7 @@ For information on setting an app's base path, see <xref:blazor/host-and-deploy/
 
 ## Scalable Vector Graphics (SVG) images
 
-Since Blazor renders HTML, browser-supported images, including Scalable Vector Graphics (SVG) images (`.svg`), are supported via the `<img>` tag:
+Since Blazor renders HTML, browser-supported images, including [Scalable Vector Graphics (SVG) images (`.svg`)](https://developer.mozilla.org/docs/Web/SVG), are supported via the `<img>` tag:
 
 ```html
 <img alt="Example image" src="image.svg" />
@@ -1290,7 +1290,7 @@ Similarly, SVG images are supported in the CSS rules of a stylesheet file (`.css
 
 ::: moniker range=">= aspnetcore-6.0"
 
-SVG supports the `<foreignObject>` element to display arbitrary HTML within an SVG. The markup can represent arbitrary HTML, a <xref:Microsoft.AspNetCore.Components.RenderFragment>, or a Razor component.
+Blazor supports the [`<foreignObject>`](https://developer.mozilla.org/docs/Web/SVG/Element/foreignObject) element to display arbitrary HTML within an SVG. The markup can represent arbitrary HTML, a <xref:Microsoft.AspNetCore.Components.RenderFragment>, or a Razor component.
 
 The following example demonstrates: