From c6b29f4c6d23b1510db3434cb030203d5bdea119 Mon Sep 17 00:00:00 2001
From: Santosh Yadav <santosh.yadav198613@gmail.com>
Date: Wed, 26 Jun 2019 11:46:04 +0530
Subject: [PATCH] docs: added svg example (#30559)

Fixes #30441

PR Close #30559
---
 .../template-syntax/src/app/app.module.ts     |  4 +++-
 .../template-syntax/src/app/svg.component.css |  4 ++++
 .../template-syntax/src/app/svg.component.svg |  6 ++++++
 .../template-syntax/src/app/svg.component.ts  | 17 +++++++++++++++
 aio/content/guide/template-syntax.md          | 21 +++++++++++++++++++
 5 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 aio/content/examples/template-syntax/src/app/svg.component.css
 create mode 100644 aio/content/examples/template-syntax/src/app/svg.component.svg
 create mode 100644 aio/content/examples/template-syntax/src/app/svg.component.ts

diff --git a/aio/content/examples/template-syntax/src/app/app.module.ts b/aio/content/examples/template-syntax/src/app/app.module.ts
index 5c2fbed6f1..55e359ccd2 100644
--- a/aio/content/examples/template-syntax/src/app/app.module.ts
+++ b/aio/content/examples/template-syntax/src/app/app.module.ts
@@ -8,6 +8,7 @@ import { ClickDirective, ClickDirective2 } from './click.directive';
 import { HeroFormComponent }      from './hero-form.component';
 import { heroSwitchComponents }   from './hero-switch.components';
 import { SizerComponent }         from './sizer.component';
+import { SvgComponent }           from './svg.component';
 
 @NgModule({
   imports: [
@@ -22,7 +23,8 @@ import { SizerComponent }         from './sizer.component';
     heroSwitchComponents,
     ClickDirective,
     ClickDirective2,
-    SizerComponent
+    SizerComponent,
+    SvgComponent
   ],
   bootstrap: [ AppComponent ]
 })
diff --git a/aio/content/examples/template-syntax/src/app/svg.component.css b/aio/content/examples/template-syntax/src/app/svg.component.css
new file mode 100644
index 0000000000..c849558dfe
--- /dev/null
+++ b/aio/content/examples/template-syntax/src/app/svg.component.css
@@ -0,0 +1,4 @@
+svg {
+  display: block;
+  width: 100%;
+}
diff --git a/aio/content/examples/template-syntax/src/app/svg.component.svg b/aio/content/examples/template-syntax/src/app/svg.component.svg
new file mode 100644
index 0000000000..62431475a0
--- /dev/null
+++ b/aio/content/examples/template-syntax/src/app/svg.component.svg
@@ -0,0 +1,6 @@
+<svg>
+  <g>
+    <rect x="0" y="0" width="100" height="100" [attr.fill]="fill" (click)="changeColor()" />
+    <text x="120" y="50">click the rectangle to change the fill color</text>
+  </g>
+</svg>
diff --git a/aio/content/examples/template-syntax/src/app/svg.component.ts b/aio/content/examples/template-syntax/src/app/svg.component.ts
new file mode 100644
index 0000000000..d3f80e143a
--- /dev/null
+++ b/aio/content/examples/template-syntax/src/app/svg.component.ts
@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-svg',
+  templateUrl: './svg.component.svg',
+  styleUrls: ['./svg.component.css']
+})
+export class SvgComponent {
+  fill = 'rgb(255, 0, 0)';
+
+  changeColor() {
+    const r = Math.floor(Math.random() * 256);
+    const g = Math.floor(Math.random() * 256);
+    const b = Math.floor(Math.random() * 256);
+    this.fill = `rgb(${r}, ${g}, ${b})`;
+  }
+}
diff --git a/aio/content/guide/template-syntax.md b/aio/content/guide/template-syntax.md
index d12de2f50a..bf11a8e97a 100644
--- a/aio/content/guide/template-syntax.md
+++ b/aio/content/guide/template-syntax.md
@@ -2273,3 +2273,24 @@ the component.
 </code-example>
 
 The `$any()` cast function works anywhere in a binding expression where a method call is valid.
+
+## SVG in templates
+
+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.
+
+Why would you use SVG as template, instead of simply adding it as image to your application?
+
+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:
+
+<code-example path="template-syntax/src/app/svg.component.ts" header="src/app/svg.component.ts">
+</code-example>
+
+Add the below 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 (`[attr.fill]="fill"`).