Run results for: inline svg vs use

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36 Edg/128.0.0.0

Browser: Chrome 128

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

InlineSVG

6.3M/s

UseSVG

6.3M/s

View exact numbers

Test name	Executions per second
✓ InlineSVG	6,322,662 Ops/sec
UseSVG	6,309,002 Ops/sec

HTML Preparation code:

<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
	<defs><!-- make sure it does not get rendered here -->
		<g id="shape-collapse"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" /></g>
	</defs>
</svg>
<div id="main"></div>

Script Preparation code:

function InlineSVG(){
  var div = document.getElementById("main");
  div.innerHtml = `<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
	<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" /></g>
</svg>`;
}
function UseSVG(){
  var div = document.getElementById("main");
  div.innerHtml = `<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
    <use xlink:href="#shape-collapse"></use>
</svg>`;
}

Tests:

InlineSVG
InlineSVG()
UseSVG
UseSVG()