title: Loading content of SVG file to show within ngFor
body: <p>I have an <code>*ngFor</code> loop that iterates through an array of <code>layouts</code>. Each element in <code>layouts</code> is a URL to an SVG file.</p>
  
  <pre><code>&lt;div *ngFor="let layout of layouts; let i = index;" class="layout" (click)="selectLayout(layout.url)"&gt;
      &lt;img src="{{ layout.url }}"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This currently outputs a list of <code>&lt;img&gt;</code> tags with the <code>src</code> as the URL of the SVG file.</p>
  
  <p>Instead I would prefer to actually inline the SVG file, e.g.</p>
  
  <pre><code>&lt;div&gt;
      &lt;svg&gt;blah1&lt;/svg&gt;
      &lt;svg&gt;blah2&lt;/svg&gt;
      &lt;svg&gt;blah3&lt;/svg&gt;
      &lt;svg&gt;blah4&lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is there any way to achieve this? In PHP I would use the <code>file_get_contents</code> function to load the content of the URL.</p>
  
  <p>EDIT</p>
  
  <p>For example, my <code>layouts</code> array contains ... </p>
  
  <pre><code>['assets/images/file-1.svg', 'assets/images/file-2.svg', 'assets/images/file-3.svg', 'assets/images/file-4.svg']
  </code></pre>