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