Benchmark: inline svg vs div-2-ayr

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="M192 48c22.1 0 40 17.9 40 40v40H212.7c-6.2-14.1-20.3-24-36.7-24c-22.1 0-40 17.9-40 40s17.9 40 40 40c16.4 0 30.5-9.9 36.7-24H232v96H192c-26.5 0-48 21.5-48 48v11.3c-14.1 6.2-24 20.3-24 36.7c0 22.1 17.9 40 40 40s40-17.9 40-40c0-16.4-9.9-30.5-24-36.7V304c0-8.8 7.2-16 16-16h40V420c0 24.3-19.7 44-44 44c-17.8 0-33.2-10.6-40.1-25.9c-3.8-8.4-12-13.9-21.2-14.1c-25.9-.7-46.7-21.9-46.7-48c0-2.6 .2-5.2 .6-7.6c1.4-8.5-2-17.1-8.7-22.5C57.3 334.1 48 316.2 48 296c0-19.3 8.5-36.6 22.1-48.3c8-6.9 10.5-18.3 6.1-28c-2.7-6-4.2-12.6-4.2-19.7c0-18.8 10.8-35.1 26.7-43c8.1-4 13.3-12.3 13.3-21.3c.1-19.3 11.7-36 28.3-43.5c6.4-2.9 11.3-8.5 13.2-15.3C158.3 60.2 173.8 48 192 48zm-4 464c26.9 0 51.2-11.6 68-30c16.8 18.5 41.1 30 68 30c32.2 0 60.5-16.5 76.9-41.5c45-8 79.1-47.3 79.1-94.5c0-.5 0-1.1 0-1.6c19.8-20.2 32-47.9 32-78.4c0-27.8-10.1-53.2-26.8-72.7C487 215.8 488 208 488 200c0-32.6-16.3-61.5-41.1-78.8c-4.5-28.9-21.8-53.5-45.9-67.8C387.5 22 356.3 0 320 0c-25.2 0-48 10.6-64 27.6C240 10.6 217.2 0 192 0c-36.3 0-67.5 22-80.9 53.4C86.9 67.7 69.6 92.3 65.1 121.2C40.3 138.5 24 167.4 24 200c0 8 1 15.8 2.8 23.3C10.1 242.8 0 268.2 0 296c0 30.5 12.2 58.2 32 78.4c0 .5 0 1.1 0 1.6c0 47.3 34.1 86.5 79.1 94.5c16.4 25 44.7 41.5 76.9 41.5zm136-48c-24.3 0-44-19.7-44-44V352h51.3c6.2 14.1 20.3 24 36.7 24c22.1 0 40-17.9 40-40s-17.9-40-40-40c-16.4 0-30.5 9.9-36.7 24H280V160h40c8.8 0 16 7.2 16 16v11.3c-14.1 6.2-24 20.3-24 36.7c0 22.1 17.9 40 40 40s40-17.9 40-40c0-16.4-9.9-30.5-24-36.7V176c0-26.5-21.5-48-48-48H280V88c0-22.1 17.9-40 40-40c18.2 0 33.7 12.2 38.5 28.9c1.9 6.8 6.8 12.4 13.2 15.3c16.6 7.5 28.2 24.1 28.3 43.5c.1 9.1 5.2 17.3 13.3 21.3c15.9 7.9 26.7 24.2 26.7 43c0 7.1-1.5 13.7-4.2 19.7c-4.4 9.7-1.9 21 6.1 28c13.5 11.8 22.1 29 22.1 48.3c0 20.2-9.3 38.1-23.9 49.9c-6.7 5.4-10 14-8.7 22.5c.4 2.5 .6 5 .6 7.6c0 26.1-20.8 47.3-46.7 48c-9.2 .3-17.4 5.7-21.2 14.1C357.2 453.4 341.8 464 324 464zM176 128a16 16 0 1 1 0 32 16 16 0 1 1 0-32zM160 336a16 16 0 1 1 0 32 16 16 0 1 1 0-32zM336 224a16 16 0 1 1 32 0 16 16 0 1 1 -32 0zm32 96a16 16 0 1 1 0 32 16 16 0 1 1 0-32z"></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="M192 48c22.1 0 40 17.9 40 40v40H212.7c-6.2-14.1-20.3-24-36.7-24c-22.1 0-40 17.9-40 40s17.9 40 40 40c16.4 0 30.5-9.9 36.7-24H232v96H192c-26.5 0-48 21.5-48 48v11.3c-14.1 6.2-24 20.3-24 36.7c0 22.1 17.9 40 40 40s40-17.9 40-40c0-16.4-9.9-30.5-24-36.7V304c0-8.8 7.2-16 16-16h40V420c0 24.3-19.7 44-44 44c-17.8 0-33.2-10.6-40.1-25.9c-3.8-8.4-12-13.9-21.2-14.1c-25.9-.7-46.7-21.9-46.7-48c0-2.6 .2-5.2 .6-7.6c1.4-8.5-2-17.1-8.7-22.5C57.3 334.1 48 316.2 48 296c0-19.3 8.5-36.6 22.1-48.3c8-6.9 10.5-18.3 6.1-28c-2.7-6-4.2-12.6-4.2-19.7c0-18.8 10.8-35.1 26.7-43c8.1-4 13.3-12.3 13.3-21.3c.1-19.3 11.7-36 28.3-43.5c6.4-2.9 11.3-8.5 13.2-15.3C158.3 60.2 173.8 48 192 48zm-4 464c26.9 0 51.2-11.6 68-30c16.8 18.5 41.1 30 68 30c32.2 0 60.5-16.5 76.9-41.5c45-8 79.1-47.3 79.1-94.5c0-.5 0-1.1 0-1.6c19.8-20.2 32-47.9 32-78.4c0-27.8-10.1-53.2-26.8-72.7C487 215.8 488 208 488 200c0-32.6-16.3-61.5-41.1-78.8c-4.5-28.9-21.8-53.5-45.9-67.8C387.5 22 356.3 0 320 0c-25.2 0-48 10.6-64 27.6C240 10.6 217.2 0 192 0c-36.3 0-67.5 22-80.9 53.4C86.9 67.7 69.6 92.3 65.1 121.2C40.3 138.5 24 167.4 24 200c0 8 1 15.8 2.8 23.3C10.1 242.8 0 268.2 0 296c0 30.5 12.2 58.2 32 78.4c0 .5 0 1.1 0 1.6c0 47.3 34.1 86.5 79.1 94.5c16.4 25 44.7 41.5 76.9 41.5zm136-48c-24.3 0-44-19.7-44-44V352h51.3c6.2 14.1 20.3 24 36.7 24c22.1 0 40-17.9 40-40s-17.9-40-40-40c-16.4 0-30.5 9.9-36.7 24H280V160h40c8.8 0 16 7.2 16 16v11.3c-14.1 6.2-24 20.3-24 36.7c0 22.1 17.9 40 40 40s40-17.9 40-40c0-16.4-9.9-30.5-24-36.7V176c0-26.5-21.5-48-48-48H280V88c0-22.1 17.9-40 40-40c18.2 0 33.7 12.2 38.5 28.9c1.9 6.8 6.8 12.4 13.2 15.3c16.6 7.5 28.2 24.1 28.3 43.5c.1 9.1 5.2 17.3 13.3 21.3c15.9 7.9 26.7 24.2 26.7 43c0 7.1-1.5 13.7-4.2 19.7c-4.4 9.7-1.9 21 6.1 28c13.5 11.8 22.1 29 22.1 48.3c0 20.2-9.3 38.1-23.9 49.9c-6.7 5.4-10 14-8.7 22.5c.4 2.5 .6 5 .6 7.6c0 26.1-20.8 47.3-46.7 48c-9.2 .3-17.4 5.7-21.2 14.1C357.2 453.4 341.8 464 324 464zM176 128a16 16 0 1 1 0 32 16 16 0 1 1 0-32zM160 336a16 16 0 1 1 0 32 16 16 0 1 1 0-32zM336 224a16 16 0 1 1 32 0 16 16 0 1 1 -32 0zm32 96a16 16 0 1 1 0 32 16 16 0 1 1 0-32z"></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: 21 days ago)

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

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Test name	Executions per second
inline svg	524680.5 Ops/sec
div	570247.1 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 21 days ago):

LLMs can make mistakes. Check important info.

### Benchmark Overview

The benchmark titled **"inline svg vs div-2-ayr"** compares the performance of rendering an inline SVG element and a simple `<div>` element using React. The two approaches assessed in the tests are defined as follows:

1. **SVGInline (Inline SVG)**:
   - This test case involves rendering an SVG element created with React’s `createElement` method. The SVG contains a path that is defined using the `dangerouslySetInnerHTML` property to embed the SVG markup directly.

2. **DivTest (Div)**:
   - This test case renders a basic `<div>` element with a simple text string "Foo" using the same method.

### Test Case Definitions

- **Inline SVG Test**: `ReactDOM.render(React.createElement(SVGInline, null), document.querySelector("#main"));`
- **Div Test**: `ReactDOM.render(React.createElement(DivTest, null), document.querySelector("#main"));`

### Performance Results

The benchmark results show the number of executions per second for each test case in a specific environment (running on Chrome 133 on a Windows desktop):

- **Div Test**: 570,247.125 executions per second
- **Inline SVG Test**: 524,680.5 executions per second

### Pros and Cons of the Approaches

#### Inline SVG (SVGInline)
**Pros**:
- SVG elements are vector-based and scalable, retaining quality regardless of size changes.
- Inline SVG allows for more complex graphics and can be styled and manipulated with CSS and JS, enhancing interactivity.

**Cons**:
- Rendering inline SVG may have a higher overhead compared to simple HTML elements like `<div>`, as it involves parsing and rendering SVG markup.
- Some older browsers may not fully support specific SVG features.

#### Div (DivTest)
**Pros**:
- Simple and lightweight; rendering a `<div>` with plain text is less resource-intensive than SVG.
- Easy to use and supported by all browsers, ensuring broad compatibility.

**Cons**:
- Divs are limited in terms of graphical representation since they primarily deal with layout and text.
- For complex visual representations, using `<div>` may require additional libraries or images.

### Other Considerations

- **Use Cases**: When handling graphic-heavy applications (like dashboards, charts, or custom icons), SVG is often preferred despite potential performance costs. Conversely, if the use case is text-heavy or primarily involves layout adjustments, simple `<div>` elements suffice and perform better.
- **Library**: The benchmark uses **React**, a popular JavaScript library for building user interfaces. React enables developers to efficiently update the DOM by using a virtual DOM.
- **dangerouslySetInnerHTML**: This React prop allows embedding raw HTML into components, which is useful for injecting SVG markup. However, it poses a risk of XSS (cross-site scripting) if not handled carefully, as it bypasses React's built-in protection against malicious scripts.

### Alternatives

1. **Canvas**: For more complex graphics or dynamic rendering, using the `<canvas>` element provides a performance advantage, especially for animations or games, due to lower overhead in rendering compared to SVG.

2. **WebGL**: For 3D graphics or very high-performance scenarios, WebGL can render scenes directly using the GPU, offering advantages in terms of processing power for complex visualizations.

3. **Image Files**: Static images (like PNG or JPEG) may be more efficient than rendering SVG in some contexts, especially for icons or logos that do not require scaling.

4. **VML or other graphic formats**: For older versions of Internet Explorer, VML (Vector Markup Language) could be an alternative, though it is largely obsolete today.

In conclusion, the selected method for rendering should be based on the specific use case, considering the trade-offs between performance, complexity, and interactivity. Each method serves different scenarios, making it essential to evaluate requirements before implementation.

Related benchmarks:

inline svg vs div-2-ayr (version: 1)

Comparing performance of: Inline SVG vs Div

Comparing performance of: inline svg vs div

Created: 21 days ago by: Guest

Jump to the latest result

inline svg

div

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 21 days ago):