title: ng-include tag and SVG images in AngularJS
body: <p>I've came across a strange issue. It's not like it's blocking something, but I thought that it would be better to understand this behavior. I use ng-include in AngularJS to include SVG images so I can style them with CSS.</p>
  
  <p>So this code works fine:</p>
  
  <pre><code>&lt;ng-include src="'resources/svg/mastercard.svg'"&gt;&lt;/ng-include&gt;
  &lt;ng-include src="'resources/svg/paypal.svg'"&gt;&lt;/ng-include&gt;
  </code></pre>
  
  <p>This works fine too:</p>
  
  <pre><code>&lt;span&gt;&lt;ng-include src="'resources/svg/mastercard.svg'" /&gt;&lt;/span&gt;
  &lt;span&gt;&lt;ng-include src="'resources/svg/paypal.svg'" /&gt;&lt;/span&gt;
  </code></pre>
  
  <p>But this results in <strong>Cannot read property 'insertBefore' of null</strong> error and only the first image shows up on the page:</p>
  
  <pre><code>&lt;ng-include src="'resources/svg/mastercard.svg'" /&gt;
  &lt;ng-include src="'resources/svg/paypal.svg'" /&gt;
  </code></pre>
  
  <p>Basically, you can use multiple ng-include tags in one container if you close them with with a separate statement, but if you write it in a short manner - it must be one per container to work. Why is that? Is there something fundamental about it that I'm missing and should know?</p>