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"));

Historical Performance Data aggregated from 40 community runs

Desktop Results:

Chrome 31 runs

Div

614K/s

Inline SVG

588K/s

View exact numbers

✓ Div: 614,212 ops/sec
• Inline SVG: 588,343 ops/sec

Firefox 9 runs

Div

351K/s

Inline SVG

326K/s

View exact numbers

✓ Div: 351,164 ops/sec
• Inline SVG: 325,592 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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/137.0.0.0 Safari/537.36

Browser/OS: Chrome 137 on Windows

View result in a separate tab

Div

718K/s

Inline SVG

674K/s

View exact numbers

Test name	Executions per second
✓ Div	717,520 Ops/sec
Inline SVG	674,318 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.

inline svg vs div (version: 0)

Comparing performance of: `Inline SVG vs Div`

Created: 5 years ago by: Guest

Go to the latest result

Inline SVG

Div

Historical Performance Data aggregated from 40 community runs

Desktop Results:

Chrome 31 runs

Firefox 9 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

inline svg vs div (version: 0)

Comparing performance of: Inline SVG vs Div

Created: 5 years ago by: Guest

Go to the latest result

Inline SVG

Div

Historical Performance Data aggregated from 40 community runs

Desktop Results:

Chrome 31 runs

Firefox 9 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Inline SVG vs Div`