Benchmark: inline svg vs div-2-ayr

HTML Preparation code:

<svg className="container" xmlns="http://www.w3.org/2000/svg" style="position: absolute; width: 0; height: 0" width="0" height="0">
	<defs>
    <symbol id="umbrella" viewBox="0 0 32 32">
        <path d="M192 48c22.1 0 40 17.9 40 40v40H212.7c-6.2-14.1-20.3-24-36.7-24c-22.1 0-40 17.9-40 40s17.9 40 40 40c16.4 0 30.5-9.9 36.7-24H232v96H192c-26.5 0-48 21.5-48 48v11.3c-14.1 6.2-24 20.3-24 36.7c0 22.1 17.9 40 40 40s40-17.9 40-40c0-16.4-9.9-30.5-24-36.7V304c0-8.8 7.2-16 16-16h40V420c0 24.3-19.7 44-44 44c-17.8 0-33.2-10.6-40.1-25.9c-3.8-8.4-12-13.9-21.2-14.1c-25.9-.7-46.7-21.9-46.7-48c0-2.6 .2-5.2 .6-7.6c1.4-8.5-2-17.1-8.7-22.5C57.3 334.1 48 316.2 48 296c0-19.3 8.5-36.6 22.1-48.3c8-6.9 10.5-18.3 6.1-28c-2.7-6-4.2-12.6-4.2-19.7c0-18.8 10.8-35.1 26.7-43c8.1-4 13.3-12.3 13.3-21.3c.1-19.3 11.7-36 28.3-43.5c6.4-2.9 11.3-8.5 13.2-15.3C158.3 60.2 173.8 48 192 48zm-4 464c26.9 0 51.2-11.6 68-30c16.8 18.5 41.1 30 68 30c32.2 0 60.5-16.5 76.9-41.5c45-8 79.1-47.3 79.1-94.5c0-.5 0-1.1 0-1.6c19.8-20.2 32-47.9 32-78.4c0-27.8-10.1-53.2-26.8-72.7C487 215.8 488 208 488 200c0-32.6-16.3-61.5-41.1-78.8c-4.5-28.9-21.8-53.5-45.9-67.8C387.5 22 356.3 0 320 0c-25.2 0-48 10.6-64 27.6C240 10.6 217.2 0 192 0c-36.3 0-67.5 22-80.9 53.4C86.9 67.7 69.6 92.3 65.1 121.2C40.3 138.5 24 167.4 24 200c0 8 1 15.8 2.8 23.3C10.1 242.8 0 268.2 0 296c0 30.5 12.2 58.2 32 78.4c0 .5 0 1.1 0 1.6c0 47.3 34.1 86.5 79.1 94.5c16.4 25 44.7 41.5 76.9 41.5zm136-48c-24.3 0-44-19.7-44-44V352h51.3c6.2 14.1 20.3 24 36.7 24c22.1 0 40-17.9 40-40s-17.9-40-40-40c-16.4 0-30.5 9.9-36.7 24H280V160h40c8.8 0 16 7.2 16 16v11.3c-14.1 6.2-24 20.3-24 36.7c0 22.1 17.9 40 40 40s40-17.9 40-40c0-16.4-9.9-30.5-24-36.7V176c0-26.5-21.5-48-48-48H280V88c0-22.1 17.9-40 40-40c18.2 0 33.7 12.2 38.5 28.9c1.9 6.8 6.8 12.4 13.2 15.3c16.6 7.5 28.2 24.1 28.3 43.5c.1 9.1 5.2 17.3 13.3 21.3c15.9 7.9 26.7 24.2 26.7 43c0 7.1-1.5 13.7-4.2 19.7c-4.4 9.7-1.9 21 6.1 28c13.5 11.8 22.1 29 22.1 48.3c0 20.2-9.3 38.1-23.9 49.9c-6.7 5.4-10 14-8.7 22.5c.4 2.5 .6 5 .6 7.6c0 26.1-20.8 47.3-46.7 48c-9.2 .3-17.4 5.7-21.2 14.1C357.2 453.4 341.8 464 324 464zM176 128a16 16 0 1 1 0 32 16 16 0 1 1 0-32zM160 336a16 16 0 1 1 0 32 16 16 0 1 1 0-32zM336 224a16 16 0 1 1 32 0 16 16 0 1 1 -32 0zm32 96a16 16 0 1 1 0 32 16 16 0 1 1 0-32z"></path>
	</symbol>
	</defs>
</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: "office", xmlns: "http://www.w3.org/2000/svg", width: 190, height: 190, viewBox: "0 0 188.5 188.5",
     dangerouslySetInnerHTML: {
       __html: '<path d="M192 48c22.1 0 40 17.9 40 40v40H212.7c-6.2-14.1-20.3-24-36.7-24c-22.1 0-40 17.9-40 40s17.9 40 40 40c16.4 0 30.5-9.9 36.7-24H232v96H192c-26.5 0-48 21.5-48 48v11.3c-14.1 6.2-24 20.3-24 36.7c0 22.1 17.9 40 40 40s40-17.9 40-40c0-16.4-9.9-30.5-24-36.7V304c0-8.8 7.2-16 16-16h40V420c0 24.3-19.7 44-44 44c-17.8 0-33.2-10.6-40.1-25.9c-3.8-8.4-12-13.9-21.2-14.1c-25.9-.7-46.7-21.9-46.7-48c0-2.6 .2-5.2 .6-7.6c1.4-8.5-2-17.1-8.7-22.5C57.3 334.1 48 316.2 48 296c0-19.3 8.5-36.6 22.1-48.3c8-6.9 10.5-18.3 6.1-28c-2.7-6-4.2-12.6-4.2-19.7c0-18.8 10.8-35.1 26.7-43c8.1-4 13.3-12.3 13.3-21.3c.1-19.3 11.7-36 28.3-43.5c6.4-2.9 11.3-8.5 13.2-15.3C158.3 60.2 173.8 48 192 48zm-4 464c26.9 0 51.2-11.6 68-30c16.8 18.5 41.1 30 68 30c32.2 0 60.5-16.5 76.9-41.5c45-8 79.1-47.3 79.1-94.5c0-.5 0-1.1 0-1.6c19.8-20.2 32-47.9 32-78.4c0-27.8-10.1-53.2-26.8-72.7C487 215.8 488 208 488 200c0-32.6-16.3-61.5-41.1-78.8c-4.5-28.9-21.8-53.5-45.9-67.8C387.5 22 356.3 0 320 0c-25.2 0-48 10.6-64 27.6C240 10.6 217.2 0 192 0c-36.3 0-67.5 22-80.9 53.4C86.9 67.7 69.6 92.3 65.1 121.2C40.3 138.5 24 167.4 24 200c0 8 1 15.8 2.8 23.3C10.1 242.8 0 268.2 0 296c0 30.5 12.2 58.2 32 78.4c0 .5 0 1.1 0 1.6c0 47.3 34.1 86.5 79.1 94.5c16.4 25 44.7 41.5 76.9 41.5zm136-48c-24.3 0-44-19.7-44-44V352h51.3c6.2 14.1 20.3 24 36.7 24c22.1 0 40-17.9 40-40s-17.9-40-40-40c-16.4 0-30.5 9.9-36.7 24H280V160h40c8.8 0 16 7.2 16 16v11.3c-14.1 6.2-24 20.3-24 36.7c0 22.1 17.9 40 40 40s40-17.9 40-40c0-16.4-9.9-30.5-24-36.7V176c0-26.5-21.5-48-48-48H280V88c0-22.1 17.9-40 40-40c18.2 0 33.7 12.2 38.5 28.9c1.9 6.8 6.8 12.4 13.2 15.3c16.6 7.5 28.2 24.1 28.3 43.5c.1 9.1 5.2 17.3 13.3 21.3c15.9 7.9 26.7 24.2 26.7 43c0 7.1-1.5 13.7-4.2 19.7c-4.4 9.7-1.9 21 6.1 28c13.5 11.8 22.1 29 22.1 48.3c0 20.2-9.3 38.1-23.9 49.9c-6.7 5.4-10 14-8.7 22.5c.4 2.5 .6 5 .6 7.6c0 26.1-20.8 47.3-46.7 48c-9.2 .3-17.4 5.7-21.2 14.1C357.2 453.4 341.8 464 324 464zM176 128a16 16 0 1 1 0 32 16 16 0 1 1 0-32zM160 336a16 16 0 1 1 0 32 16 16 0 1 1 0-32zM336 224a16 16 0 1 1 32 0 16 16 0 1 1 -32 0zm32 96a16 16 0 1 1 0 32 16 16 0 1 1 0-32z"></path>'
     }
    },
  );
}

var DivTest = function() {
	return React.createElement(
      "div",
      { className: "office", width: 190, height: 190, },
      "Foo"
    );
}

Tests:

inline svg
ReactDOM.render(React.createElement(SVGInline, null), document.querySelector("#main"));
div
ReactDOM.render(React.createElement(DivTest, null), document.querySelector("#main"));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
inline svg
div

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Test name	Executions per second
inline svg	524680.5 Ops/sec
div	570247.1 Ops/sec

Related benchmarks:

inline svg vs div-2-ayr (version: 1)

Comparing performance of: Inline SVG vs Div

Comparing performance of: inline svg vs div

Created: one year ago by: Guest

Jump to the latest result

inline svg

div

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A