5b31a0a294
This is part of a re-factor of template syntax and structure. The first phase breaks out template syntax into multiple documents. The second phase will be a rewrite of each doc. Specifically, this PR does the following: - Breaks sections of the current template syntax document each into their own page. - Corrects the links to and from these new pages. - Adds template syntax subsection to the left side NAV which contains all the new pages. - Adds the new files to pullapprove. PR Close #36954
28 lines
1.1 KiB
Markdown
28 lines
1.1 KiB
Markdown
# 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.
|
|
|
|
<div class="alert is-helpful">
|
|
|
|
See the <live-example name="template-syntax"></live-example> for a working example containing the code snippets in this guide.
|
|
|
|
</div>
|
|
|
|
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 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
|
|
(`[attr.fill]="fillColor"`).
|