Updated @ 2015-10-12: The following snippet could get rid of the broken icon without using CSS and JS.

<svg class="card__image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 500" preserveAspectRatio="xMidYMid slice">
  <image width="1920" height="500" xlink:href="" ng-href="{{ image.href }}"></image>
</svg>

Thanks Wouter De Loose.

i have the following <svg> in an AngularJS template and the image source would be assigned by the controller which loaded the image info from a .json file.

<svg class="card__image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 500" preserveAspectRatio="xMidYMid slice">
  <image width="1920" height="500" xlink:href="{{ image.href }}"></image>
</svg>

It works fine on my local machine but when i put it on a webserver. There would be a flash of the broken image before the image is loaded.

 

I tried many methods but still no luck. Finally, i have to set the image to hidden in CSS and listen to the image onload event to make it visible.

<svg class="card__image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 500" preserveAspectRatio="xMidYMid slice">
  <image width="1920" height="500" xlink:href="{{ image.href }}" onload="jQuery(this).css('visibility', 'visible');"></image>
</svg>

Done =)

Reference: StackOverflow – Is it possible to listen image load event in SVG?