Benchmark: SVG vs DIV Performance

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
SVG
DIV

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 months ago)

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

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
SVG	643882.2 Ops/sec
DIV	658254.2 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark measures the performance of React components, specifically a SVG inline element (`SVGInline`) and a simple `div` element (`DivTest`). The test assesses the rendering speed of these elements using ReactDOM.

**Options Compared**

There are two options being compared:

1. **SVG Inline**: This is a custom React component that renders an SVG image as inline content.
2. **Div Test**: A simple React component that renders a `div` element with a fixed class and text content.

**Pros and Cons of Each Approach**

### SVG Inline

Pros:

* Renders the SVG image directly in the DOM, potentially reducing the number of DOM mutations.
* Can leverage browser caching and optimized rendering for SVG images.

Cons:

* Requires more complex setup and configuration compared to a simple `div` element.
* May introduce additional overhead due to the complexity of the SVG image.

### Div Test

Pros:

* Simple and lightweight, with minimal setup and configuration required.
* Easy to understand and maintain.

Cons:

* Renders a plain `div` element, which may not leverage browser caching or optimized rendering for this specific use case.
* May result in more DOM mutations compared to the SVG inline approach.

**Benchmark Results**

The latest benchmark results show that the `Div Test` outperforms the `SVG Inline` component, with an average of 11.5% better performance (based on executions per second). However, it's essential to note that these results may vary depending on the specific use case and browser configuration.

**Device Platform and Browser**

The benchmark was run on a Windows Desktop with Chrome 126 browser, using a specific User Agent string (`Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36`). The device platform and browser are not expected to significantly impact the performance results.

In conclusion, while both options have their pros and cons, the `Div Test` appears to be the faster of the two approaches in this benchmark. However, further investigation may be necessary to determine the best approach for a specific use case or project requirement.

Related benchmarks:

SVG vs DIV Performance (version: 0)

Comparing performance of: SVG vs DIV

Created: one year ago by: Registered User

Jump to the latest result

SVG

DIV

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):