meduz'<p>It’s a bit frustrating to discover that plain inline SVGs perform better than inline sprites using `<symbol>` :nard:.</p><p><span class="h-card" translate="no"><a href="https://social.lol/@tylersticka" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>tylersticka</span></a></span> has an excellent article (<a href="https://cloudfour.com/thinks/svg-icon-stress-test/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">cloudfour.com/thinks/svg-icon-</span><span class="invisible">stress-test/</span></a>) and test website (<a href="https://svg-icon-stress-test.netlify.app/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">svg-icon-stress-test.netlify.a</span><span class="invisible">pp/</span></a>) for this.</p><p>Also not noted in the article, but according to Chromium dev tools, the memory heap for the test website is the following:<br>- zero icons: 9 MB<br>- 1000 inline SVGs: 16.5 MB<br>- 1000 symbol sprites: 21.6 MB</p><p><a href="https://m.nintendojo.fr/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>HTML</span></a> <a href="https://m.nintendojo.fr/tags/WebPerf" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebPerf</span></a> <a href="https://m.nintendojo.fr/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SVG</span></a></p>