title: SVG flickering in Chrome in Angular app with data update
body: <p>I'm working on an app in Angular 4. In one view I'm using some svgs placed between data that is retrieved from API request. It looks like this: </p>
  
  <pre><code>&lt;div&gt;
    &lt;div&gt;
       &lt;svg&gt;&lt;use xlink:href="./assets/svg/machine.svg#message-icon"&gt;&lt;/use&gt;&lt;/svg&gt;
    &lt;/div&gt;
    &lt;div&gt;{{machine.state}}&lt;/div&gt;
    &lt;div&gt;
       &lt;svg&gt;&lt;use xlink:href="./assets/svg/machine.svg#settings-icon"&gt;&lt;/use&gt;&lt;/svg&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>All svgs are put in one file (machine.svg), and are defined in &lt; symbol > tags with ids.</p>
  
  <p>Now my problem is when I set interval every 2 seconds to update data from API request, my svg icons appear to flicker with every update, but it only happens in Chrome. </p>
  
  <p>I've checked the network logs and it seems that whole svg file is downloaded with every API request:</p>
  
  <p><a href="https://i.stack.imgur.com/P2uOn.png" rel="noreferrer"><img src="https://i.stack.imgur.com/P2uOn.png" alt="enter image description here"></a></p>
  
  <p>While in Mozilla everything works fine, svg is downloaded only once:</p>
  
  <p><a href="https://i.stack.imgur.com/uOUlK.png" rel="noreferrer"><img src="https://i.stack.imgur.com/uOUlK.png" alt="enter image description here"></a></p>
  
  <p>I've tried to put svg in &lt; object > tag, but the requests are even more numerous. Putting every single svg in &lt; img > tag seemed to resolve the problem with requests, but I would prefer to be in control of "fill" property. Putting the whole svg directly on the page solved problem too, but it doesn't seem to be a clean solution.</p>
  
  <p>My question is if there is a way to retrieve svg from a file without Chrome downloading it constantly?</p>