From 5e95153d4413fb7d3d981c0e308d46b3222e61e0 Mon Sep 17 00:00:00 2001
From: David Shevitz <dshevitz@google.com>
Date: Tue, 19 Jan 2021 17:39:33 +0000
Subject: [PATCH] docs: Return SVG topic to documentation; light edits for
 clarity (#40487)

PR Close #40487
---
 aio/content/guide/svg-in-templates.md | 27 ++++++---------------------
 aio/content/navigation.json           |  5 +++++
 2 files changed, 11 insertions(+), 21 deletions(-)

diff --git a/aio/content/guide/svg-in-templates.md b/aio/content/guide/svg-in-templates.md
index ee0d37a4d4..ddeba5309e 100644
--- a/aio/content/guide/svg-in-templates.md
+++ b/aio/content/guide/svg-in-templates.md
@@ -1,18 +1,6 @@
-# SVG in templates
+# SVG as templates
 
-<div class="callout is-critical">
-
-<header>Marked for archiving</header>
-
-To ensure that you have the best experience possible, this topic is marked for archiving until we determine that it clearly conveys the most accurate information possible.
-
-If you think this content should not be archived, please file a [GitHub issue](https://github.com/angular/angular/issues/new?template=3-docs-bug.md).
-
-</div>
-
-It is possible to use SVG as valid templates in Angular. All of the template syntax below is
-applicable to both SVG and HTML. Learn more in the SVG [1.1](https://www.w3.org/TR/SVG11/) and
-[2.0](https://www.w3.org/TR/SVG2/) specifications.
+You can use SVG files as templates in your Angular applications. When you use an SVG as the template, you are able to use directives and bindings just like with HTML templates. With these features, you can dynamically generate interactive graphics.
 
 <div class="alert is-helpful">
 
@@ -20,18 +8,15 @@ See the <live-example name="template-syntax"></live-example> for a working examp
 
 </div>
 
-Why would you use SVG as template, instead of simply adding it as image to your application?
+## SVG syntax example
 
-When you use an SVG as the template, you are able to use directives and bindings just like with HTML
-templates. This means that you will be able to dynamically generate interactive graphics.
-
-Refer to the sample code snippet below for a syntax example:
+The following example shows the syntax for using an SVG as a template.
 
 <code-example path="template-syntax/src/app/svg.component.ts" header="src/app/svg.component.ts"></code-example>
 
-Add the following code to your `svg.component.svg` file:
+To see property and event binding in action, add the following code to your `svg.component.svg` file:
 
 <code-example path="template-syntax/src/app/svg.component.svg" header="src/app/svg.component.svg"></code-example>
 
-Here you can see the use of a `click()` event binding and the property binding syntax
+The example given uses a `click()` event binding and the property binding syntax
 (`[attr.fill]="fillColor"`).
diff --git a/aio/content/navigation.json b/aio/content/navigation.json
index ed1348a342..1d5f962007 100644
--- a/aio/content/navigation.json
+++ b/aio/content/navigation.json
@@ -196,6 +196,11 @@
               "url": "guide/inputs-outputs",
               "title": "Inputs and Outputs",
               "tooltip": "Introductory guide to sharing data between parent and child directives or components."
+            },
+            {
+              "url": "guide/svg-in-templates",
+              "title": "SVG as templates",
+              "tooltip": "Learn how to use SVGs as templates for Angular applications."
             }
           ]
         },