As you can see in the example, the templateUrl property of app.component.ts is set to a .svg file, just like you would use a .html file as template. In the svg file, you can use all the features you are used to from .html files, like bindings or directives.

In the example, I bind to attr.fill instead of just binding to fill . That’s because Angular does not know the schema for svg elements, and would otherwise fail with “Can’t bind to ‘fill’ since it isn’t a known property of ‘:svg:rect”.

At Diamant Software, we use an .svg template in one of our projects that shows an invoice processing process diagram. The user can click on the different steps in the diagram to navigate in the application, and we also dynamically show or hide parts of the image based on the application state. The .svg image was created by our marketing department and could be used as a template with only some minor modifications.

Other use cases for .svg files as templates could be generating charts. I’m working on a chart example that I plan to publish soon.

This feature was implemented as part of @ngtools/webpack , so you can also use it in your own webpack configuration without the Angular cli.

Adding this feature to Angular CLI was my fist contribution to Angular CLI. Let me know if you like it or find it useful. I’m probably also going to blog about some of the things I learned about Angular CLI internals when I added that feature. By the way, the Angular CLI team was very helpful when I worked on my pull request. They quickly answered my questions and provided valuable feedback.