title: How do I render a SVG in Angular as a URL reference rather than using the SVG object itself?
body: <p>I currently have a SVG in a url, that I want to render in Angular via HTML. Because the block I'm trying to render the SVG in is in a for loop, I'm trying to dynamically render the SVG via a URL reference, like below:</p>
  
  <p>Our app has AngularJS AND Angular6, and I was able to render the SVG via url in the AngularJS side using the object tag with ng-attr-data="svgUrl".
  I've tried different combinations of img tags and object tags with the newer syntaxes, but am unable to get it to render like in AngularJS.</p>
  
  <pre><code>&lt;div class="row checkout-items mb-3" *ngFor="let item of orderSummaryModel.items"&gt;
      //For rendering PNG, works fine
      &lt;img *ngIf="!item.color.imageFeatured.includes('mockupSvg')" class="product-image img-fluid" [src]="item.color.imageFeatured" nopin="nopin"&gt;      
      //Trying to render SVG here via url 
      &lt;object *ngIf="item.color.imageFeatured.includes('mockupSvg')" [attr.xlink:href]="item.color.imageFeatured" type="image/svg+xml"&gt;&lt;/object&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The expected result is that the SVG renders, where item.color.imageFeatured is a SVG url. It's currently showing up as blank, with a empty #document, although the SVG url renders fine when opened separately in a browser.</p>