Benchmark: inline svg vs div

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="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>
	</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="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",
      { 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: 10 months ago)

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

Browser/OS: Chrome 137 on Windows

View result in a separate tab

Test name	Executions per second
Inline SVG	674318.1 Ops/sec
Div	717520.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript benchmark that compares the performance of two approaches: using an inline SVG element and using a `<div>` element to render React components.

**Test Cases**

There are two individual test cases:

1. **Inline SVG**: This test case renders the `SVGInline` component, which is a React component that returns an SVG element directly.
2. **Div**: This test case renders the `DivTest` component, which is a React component that returns a `<div>` element.

**Benchmark Preparation Code**

The script preparation code is provided in the "Script Preparation Code" field of the benchmark definition JSON:

```javascript
var SVGInline = function() {
  return React.createElement(
    "svg",
    { className: "office", xmlns: "http://www.w3.org/2000/svg", width: 190, height: 190, dangerouslySetInnerHTML: { __html: '<path d="...">' } }
  );
};

var DivTest = function() {
  return React.createElement(
    "div",
    { className: "office", width: 190, height: 190 },
    "Foo"
  );
};
```

**Html Preparation Code**

The HTML preparation code is provided in the "Html Preparation Code" field of the benchmark definition JSON:

```html
<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>
```

**Latest Benchmark Result**

The latest benchmark result is provided in the "Latest Benchmark Result" JSON:

```json
[
  {
    "RawUAString": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36",
    "Browser": "Chrome 129",
    "DevicePlatform": "Desktop",
    "OperatingSystem": "Mac OS X 10.15.7",
    "ExecutionsPerSecond": 371484.84375,
    "TestName": "Div"
  },
  {
    "RawUAString": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36",
    "Browser": "Chrome 129",
    "DevicePlatform": "Desktop",
    "OperatingSystem": "Mac OS X 10.15.7",
    "ExecutionsPerSecond": 347322.71875,
    "TestName": "Inline SVG"
  }
]
```

**Comparison**

The benchmark result shows that the `Div` test case performed better than the `Inline SVG` test case, with an execution rate of approximately 86% and 14%, respectively.

**Reasoning**

The difference in performance can be attributed to the following factors:

* Rendering complexity: The `<div>` element is a simpler element compared to an SVG element, which requires additional processing to render.
* Browser support: Chrome 129 supports SVG elements natively, while older browsers may not support them. This could lead to slower rendering times for `Inline SVG` in older browsers.

However, it's worth noting that the difference in performance is relatively small, and other factors such as JavaScript engine optimizations and caching may also play a role in determining the actual execution rates.

Overall, this benchmark suggests that using a `<div>` element can be faster than using an inline SVG element when rendering React components, but further optimization and testing are still needed to determine the best approach for specific use cases.

Related benchmarks:

inline svg vs div (version: 0)

Comparing performance of: Inline SVG vs Div

Created: 5 years ago by: Guest

Jump to the latest result

Inline SVG

Div

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):