Run results for: SVG vs DIV Performance

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Browser: Chrome 120

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
SVG	394080.8 Ops/sec
DIV	423914.2 Ops/sec

HTML Preparation code:

<svg xmlns="http://www.w3.org/2000/svg" width="28" height="18" viewBox="0 0 28 18" fill="none">
<path d="M6.92323 0.0815023C7.60115 0.0310559 8.30045 0.000488281 8.99976 0.000488281H19.0005C19.6998 0.000488281 20.3991 0.0310559 21.077 0.0815024C23.693 0.276163 25.0009 0.373493 26.3138 1.68639C27.6267 2.99928 27.7241 4.30728 27.9187 6.92328C27.9692 7.6013 27.9998 8.30071 27.9998 9.00012C27.9998 9.69953 27.9692 10.3989 27.9187 11.077C27.7241 13.693 27.6267 15.001 26.3138 16.3139C25.0009 17.6267 23.693 17.7241 21.077 17.9187C20.3991 17.9692 19.6998 17.9998 19.0005 17.9998H8.99976C8.30045 17.9998 7.60115 17.9692 6.92323 17.9187C4.30728 17.7241 2.99931 17.6267 1.68641 16.3139C0.373517 15.001 0.276183 13.693 0.0815161 11.077C0.0310616 10.3989 0.000488281 9.69953 0.000488281 9.00012C0.000488281 8.30071 0.0310616 7.6013 0.0815162 6.92328C0.276183 4.30728 0.373517 2.99928 1.68641 1.68639C2.99931 0.373493 4.30728 0.276163 6.92323 0.0815023Z" fill="currentColor"/>
</svg>

<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>

<div id="main"></div>

Script Preparation code:

var SVGInline = function() {
  return React.createElement(
    "svg",
    { className: "icon", xmlns: "http://www.w3.org/2000/svg", width: 28, height: 18, viewBox: "0 0 28 18",
     dangerouslySetInnerHTML: {
       __html: '<path d="M6.92323 0.0815023C7.60115 0.0310559 8.30045 0.000488281 8.99976 0.000488281H19.0005C19.6998 0.000488281 20.3991 0.0310559 21.077 0.0815024C23.693 0.276163 25.0009 0.373493 26.3138 1.68639C27.6267 2.99928 27.7241 4.30728 27.9187 6.92328C27.9692 7.6013 27.9998 8.30071 27.9998 9.00012C27.9998 9.69953 27.9692 10.3989 27.9187 11.077C27.7241 13.693 27.6267 15.001 26.3138 16.3139C25.0009 17.6267 23.693 17.7241 21.077 17.9187C20.3991 17.9692 19.6998 17.9998 19.0005 17.9998H8.99976C8.30045 17.9998 7.60115 17.9692 6.92323 17.9187C4.30728 17.7241 2.99931 17.6267 1.68641 16.3139C0.373517 15.001 0.276183 13.693 0.0815161 11.077C0.0310616 10.3989 0.000488281 9.69953 0.000488281 9.00012C0.000488281 8.30071 0.0310616 7.6013 0.0815162 6.92328C0.276183 4.30728 0.373517 2.99928 1.68641 1.68639C2.99931 0.373493 4.30728 0.276163 6.92323 0.0815023Z" fill="currentColor"/>'
     }
    },
  );
}

var DivTest = function() {
	return React.createElement(
      "div",
      { className: "caption-medium flex h-[18px] w-[18px] items-center justify-center rounded-md text-dark-primary", width: 28, height: 18, },
      "2"
    );
}

Tests:

SVG
ReactDOM.render(React.createElement(SVGInline, null), document.querySelector("#main"));
DIV
ReactDOM.render(React.createElement(DivTest, null), document.querySelector("#main"));