SVG Sprite Resource Loading Performance

Question

I have recently switched all of my icons on my site to SVG icons/images. I am serving all of the SVGs from one sprite file. I am using Chrome Dev Tools Performance to try to optimize loading of resources. I was very surprised to see that the loading of this SVG file is taking 10.61 total seconds. The 'network transfer' is taking 141.71ms and the 'resource loading' is taking 10.47s. From looking at this graph it appears the resource loading is also blocking quite a few other things. Full disclosure is that during this testing I am throttling the CPU to optimize for worst case performance.

However I do not understand how such a small file would take 10.47s to load the resource?

SVG File Details:
Size uncompressed: 51,183 bytes
File Path: /web_root/images/svg/all.svg
File Layout (about 20 or so symbols in the file):

<svg  preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
      <style>
         g { display: none }
         g:target { display: inline }
      </style>

      <symbol viewBox="0 0 512 512" id='twitter_solid' class='solid'>
         <g>
             .......
         </g>
      </symbol>

      <symbol>.....</symbol>
      ....
      <symbol>.....</symbol>

   </defs>
</svg>

The way I am using this in the HTML code/markup is as follows:

<svg><use xlink:href="/images/svg/all.svg#twitter_solid"></use></svg>

Am I doing something wrong with this sprite? Am I creating it the wrong way? Am I using/injecting it the incorrect way in the HTML markup? This file is so small and has so few icons/symbols, I can't believe it would take this long to 'resource load' even on a throttled CPU, unless I am doing something very incorrect.

Any advice would be greatly appreciated! Thanks in advance!