MeasureThat.net

Run results for: inline svg vs use

Go to the benchmark
Run details:
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36
Chrome 132
Linux
Desktop
2 months ago
Test name Executions per second
InlineSVG 43323312.0 Ops/sec
UseSVG 42557180.0 Ops/sec
HTML Preparation code:
AخA
 
1
<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
2
    <defs><!-- make sure it does not get rendered here -->
3
        <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>
4
    </defs>
5
</svg>
6
<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()