Run details:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.64 Safari/537.36
Chrome 101
Mac OS X 10.15.7
Desktop
2 years ago
Test name Executions per second
Inline SVG 337362.2 Ops/sec
Div 347844.3 Ops/sec
HTML Preparation code:
x
 
1
<svg className="container" xmlns="http://www.w3.org/2000/svg" style="position: absolute; width: 0; height: 0" width="0" height="0">
2
    <defs>
3
    <symbol id="umbrella" viewBox="0 0 32 32">
4
        <circle cx="12" cy="12" r="8" />
5
    </symbol>
6
    </defs>
7
</svg>
8
9
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
10
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
11
12
<div id="main"></div>
13
Script Preparation code:
 
var SVGInline = function() {
  return React.createElement(
    "svg",
    { xmlns: "http://www.w3.org/2000/svg", width: 190, height: 190, fill: 'red', viewBox: "0 0 188.5 188.5",
     dangerouslySetInnerHTML: {
       __html: '<path d="M27 14h5c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2v0zM27 14c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2v0 14c0 1.112-0.895 2-2 2-1.112 0-2-0.896-2-2.001v-1.494c0-0.291 0.224-0.505 0.5-0.505 0.268 0 0.5 0.226 0.5 0.505v1.505c0 0.547 0.444 0.991 1 0.991 0.552 0 1-0.451 1-0.991v-14.009c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-5.415 6.671-9.825 15-9.995v-1.506c0-0.283 0.224-0.499 0.5-0.499 0.268 0 0.5 0.224 0.5 0.499v1.506c8.329 0.17 15 4.58 15 9.995h-5z"></path>'
     }
    },
  );
}
var DivTest = function() {
    return React.createElement(
      "div",
      { width: 190, height: 190, borderRadius: '50%', background: 'red' },
      ""
    );
}
Tests:
  • Inline SVG

     
    ReactDOM.render(React.createElement(SVGInline, null), document.querySelector("#main"));
  • Div

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