title: SVGs in Chrome sometimes don't render
body: <p>THIRD EDIT: here's a working test case. It looks like it has something to do with caching the svg spritesheet. If I configure cache control on my server so that there's no caching of the SVG, the behavior occurs. Feel free to view source (it's all in the one file, but I don't want to include it all here).</p>
  
  <p><a href="https://stuff.spherical.fish/svgtest.html" rel="noreferrer">https://stuff.spherical.fish/svgtest.html</a></p>
  
  <p>SECOND EDIT: The fix listed below (directly injecting the  elements in the index.html instead of using an external spritesheet) just stopped working in Chrome v49 (which my beta channel browser just updated to). v48 has the intermittent rendering issue, but v49 pretty consistently doesn't render <em>anything</em> that's referred follows a <code>&lt;svg&gt;&lt;use&gt;&lt;/use&gt;&lt;/svg&gt;</code> pattern; but only in a big, complicated angular page. A boring simple test case works fine. Added a bounty for anyone who can directly point me at a known issue or wherever this might be coming from. It is most assuredly not file-not-found, as it's still an intermittent bug, and the whole page renders just fine in firefox and safari.</p>
  
  <p>EDIT: this definitely has something to do with referring to an external resource. When I embed the SVGs directly in index.html and refer to them in with <code>&lt;use xlink:href="#id"&gt;&lt;/use&gt;</code> they work fine, but if I refer to an external file in the <code>&lt;use&gt;</code> element, they only load sometimes.</p>
  
  <p>I have some weird behavior in chrome (only - this doesn't happen on opera, firefox, safari); I've been seeing it since at least the early 40s, version-wise.</p>
  
  <p>My behavior is in the middle of an ng-repeated angular structure. Everything is the same - there's a bunch of divs flexboxed together. There's also an SVG element that looks like:</p>
  
  <pre><code>&lt;svg class="icon-3"&gt;
    &lt;use xlink:href="/assets/trellis-icons.svg#icon-users"&gt;&lt;/use&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>pretty straightforward.</p>
  
  <p>The thing is, for <em>some</em> of these repeated elements, the icon doesn't render. Inspecting the element in the chrome dev tools indicates that the rendered SVG's <code>&lt;use&gt;</code> element has a height and width, whereas the non-rendered one has a zero height and width.</p>
  
  <p>It's not like there's any real difference here; I've even manually edited the DOM to make one of the offending entries match one of the rendered ones completely, but the svg still doesn't render. Here's a relevant screenshot.</p>
  
  <p><a href="https://i.stack.imgur.com/TcJYv.png" rel="noreferrer"><img src="https://i.stack.imgur.com/TcJYv.png" alt="strange svg render issue"></a></p>
  
  <p>You can see below (and ignore my padding issues with the button) the first row doesn't have the little heads and word bubble icons. This is an intermittent problem - if I reload the page, it may be fine, or maybe none of the icons will load.</p>
  
  <p>I'm wondering: is there some kind of obscure issue associated with using sprite sheets (all the SVGs that exhibit this behavior are in the same big SVG file and are referenced by #id) loading asynchronously or something?</p>
  
  <p>If this is really unknown / new behavior, I'll work on engineering a test case, but building something that probably relies on some kind of concurrency bug is kind of hard. So I figured I'd ask around first.</p>
  
  <p>EDIT to add: This behavior does not happen if I export the individual svg out as a standalone and use it in an <code>&lt;img src="icon.svg"&gt;</code> fashion. It does still fail if I do an svg use on the icon in a single standalone file.</p>
  
  <p>EDIT: per @kaiido's request, here is the relevant svg in question.</p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg"&gt;
    &lt;!-- thirty other symbols snipped --&gt;
    &lt;symbol id="icon-users" viewBox="0 0 512 512"&gt;
      &lt;path d="m352 397c-15-16-78-32-109-48c-21-11-32-33-32-53c0-10 7-19 13-26c5-6 9-14 13-24c8-4 18-12 18-31c0-12-2-19-5-24c1-11 2-22 3-34c4-45-42-90-89-90c-47 0-92 45-88 90c1 12 2 23 3 34c-4 5-5 12-5 24c0 19 9 27 18 31c4 10 8 18 13 24c6 7 13 16 13 26c0 20-11 42-32 53c-18 9-48 19-72 28l0 68l354 0c0 0 0-32-16-48z m146-7c-21-8-46-16-62-24c-17-8-25-27-25-43c0-8 5-15 10-21c4-5 8-12 11-20c7-3 15-10 15-25c0-10-2-16-5-20c1-9 2-18 3-27c3-37-34-76-73-76c-38 0-75 39-72 76c1 9 2 18 3 27c-3 4-5 10-5 20c0 16 8 22 15 25c3 8 7 15 11 20c4 6 10 13 10 21c0 10-4 22-11 31c30 11 43 22 53 33c19 19 19 58 19 58l103 0z"/&gt;
    &lt;/symbol&gt;
  &lt;/svg&gt;
  </code></pre>