Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Run results for:
inline svg vs use
Go to the benchmark
Embed
Embed Benchmark Result
Run details:
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36
Browser:
Chrome 135
Operating system:
Windows
Device Platform:
Desktop
Date tested:
one year ago
Test name
Executions per second
InlineSVG
15223520.0 Ops/sec
UseSVG
15225740.0 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()