Benchmark: React svg inline vs use 500x

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 SVGUse = 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" },
      React.createElement("use", { xlinkHref: '#umbrella' })
    );
}

Tests:

SVGInline
for(i=0;i<500;i++){ ReactDOM.render(React.createElement(SVGInline, null), document.querySelector("#main")); }
SVGUse
for(i=0;i<500;i++){ ReactDOM.render(React.createElement(SVGUse, null), document.querySelector("#main")); }

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

SVGInline

1K/s

SVGUse

1K/s

Fastest: SVGInline (1.2x faster)

View exact numbers

✓ SVGInline: 1,322 ops/sec
• SVGUse: 1,129 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
SVGInline
SVGUse

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Browser/OS: Chrome 130 on Mac OS X 10.15.7

View result in a separate tab

SVGInline

2K/s

SVGUse

1K/s

View exact numbers

Test name	Executions per second
✓ SVGInline	1,543 Ops/sec
SVGUse	1,445 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of MeasureThat.net and explore what's being tested in this benchmark.

**Benchmark Definition**

The benchmark is designed to compare two approaches for rendering SVG images using React: `SVGInline` and `SVGUse`. The test cases use the same SVG image, but with different implementation details.

**Options Compared**

There are two options being compared:

1. **SVGInline**: This approach uses the `React.createElement` method to render the SVG image directly within a React component. The SVG code is embedded as a string within the component's JSX.
2. **SVGUse**: This approach uses the `React.createElement` method to render an `<svg>` element, and then uses the `<use>` element to reference the actual SVG image from a separate definition.

**Pros and Cons**

Here are some pros and cons of each approach:

**SVGInline**

Pros:

* Simplifies the rendering process by embedding the SVG code directly within the React component.
* May be faster since there's less overhead for referencing an external SVG file.

Cons:

* The SVG code is embedded as a string, which can lead to performance issues if the SVG is large or complex.
* This approach may not be suitable for larger applications where the SVG files are expected to change frequently.

**SVGUse**

Pros:

* Separate the SVG image from the React component, making it easier to manage and update the SVG independently.
* Can take advantage of caching mechanisms to improve performance.

Cons:

* Requires an additional `<svg>` element to be rendered, which can add overhead.
* The `<use>` element requires a reference to the actual SVG file, which may introduce latency.

**Test Cases**

The two test cases are identical in terms of the benchmark definition. They simply use different implementation details (SVGInline vs. SVGUse) and render the same SVG image 500 times using React's `ReactDOM.render` method.

**Latest Benchmark Result**

The latest benchmark result shows that Chrome 128, running on a Mac OS X 10.15.7 machine, renders the `SVGInline` approach approximately 349 iterations per second (iters/sec), while the `SVGUse` approach is rendered around 243 iters/sec.

Keep in mind that these results are specific to this particular benchmark and may not generalize to other scenarios or environments.

React svg inline vs use 500x (version: 0)

Comparing performance of: `SVGInline vs SVGUse`

Created: 4 years ago by: Guest

Go to the latest result

SVGInline

SVGUse

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

React svg inline vs use 500x (version: 0)

Comparing performance of: SVGInline vs SVGUse

Created: 4 years ago by: Guest

Go to the latest result

SVGInline

SVGUse

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 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: `SVGInline vs SVGUse`