title: Angular 2 - How to have an `svg` in app.component and a `circle` as a child component?
body: <p>So I want to develop a Pac-man game using Angular, I want to use an <strong>SVG</strong> for this, I want to create the <code>board.component</code> which will have an embedded <code>pacman.component</code>.</p>
  
  <p><code>board.component</code> will have an <code>&lt;svg&gt;&lt;/svg&gt;</code> and <code>pacman.component</code> will have a <code>&lt;circle&gt;&lt;/circle&gt;</code> but angular throws this error in my <code>pacman.component</code>:</p>
  
  <p>[Angular] 'circle' is not a known element :</p>
  
  <blockquote>
    <ol>
    <li>If '<strong>circle</strong>' is an Angular component, then verify that it is part of this module.</li>
    <li>To allow any element add '<strong>NO_ERRORS_SCHEMA</strong>' to the '<strong>@NgModule.schemas</strong>' of this component.</li>
    </ol>
  </blockquote>
  
  <p>After fixing those errors I end up with this <strong>SVG</strong>:</p>
  
  <pre><code>  &lt;svg _ngcontent-c0="" width="100" height="100"&gt;
      &lt;app-pacman _ngcontent-c0="" _nghost-c1=""&gt;
        &lt;circle _ngcontent-c1="" fill="yellow" r="25" cx="10" cy="10"&gt;&lt;/circle&gt;
      &lt;/app-pacman&gt;
    &lt;/svg&gt;
  </code></pre>
  
  <p>Now the only problem now is that angular wraps the <code>pacman.component</code> with <code>&lt;app-pacman&gt;&lt;/app-pacman&gt;</code> and that makes the <code>circle</code> not work.</p>
  
  <p>Just wondering what would be the Angular way of doing this? I don't want to have my whole <code>svg</code> code <code>(svg, circles, paths, etc...)</code> in a single component.</p>
  
  <p>Thanks.</p>
  
  <p>Edit:</p>
  
  <p><code>board.component.html</code>:</p>
  
  <pre><code>&lt;svg [attr.width]="width" [attr.height]="height"&gt;
    &lt;app-pacman&gt;&lt;/app-pacman&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p><code>pacman.component.html</code>:</p>
  
  <pre><code>&lt;circle [attr.cx]="cx" [attr.cy]="cy" r="25" fill="yellow"&gt;&lt;/circle&gt;
  </code></pre>