docs: added svg example (#30559)

Fixes #30441

PR Close #30559

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 ]
 })

aio/content/examples/template-syntax/src/app/svg.component.css

@@ -0,0 +1,4 @@
+svg {
+  display: block;
+  width: 100%;
+}

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>

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})`;
+  }
+}

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"`).