It is possible to use SVG tags in your Angular component, to create beautiful graphs and visualizations. There are 3 things you need to know:

1. When binding an SVG attribute, use attr

<circle [attr.cx]="x" [attr.cy]="y"></circle>
    

2. When creating sub-components, use attribute and not tag selector:

// Not: <child-component></child-component>
    <g child-component></g>
    

@Component({selector: '[child-component]' })
    

3. When using SVG tags in sub-components use svg prefix:

@Component({
      selector: '[child-component]',
      template: `<svg:circle></svg:circle>`
    })