Benchmark: inline svg vs divas

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">
        <circle cx="12" cy="12" r="8" />
	</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, borderRadius: '50%', background: 'red' },
      "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:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its options.

**Benchmark Description**

The benchmark is designed to compare the performance of two approaches: rendering an SVG element using `React.createElement` with an inline SVG string, and rendering a `div` element with a red background and a circle inside it. The goal is to determine which approach is faster.

**Options Compared**

1. **Inline SVG**: This option uses `React.createElement` with an inline SVG string. The SVG string is defined in the JavaScript code using the `dangerouslySetInnerHTML` property.
2. **Div**: This option renders a `div` element with a red background and a circle inside it, but without using any libraries or frameworks.

**Pros and Cons**

1. **Inline SVG**:
	* Pros: More flexible and easy to modify the SVG content at runtime.
	* Cons: Can be slower due to the additional processing required for parsing and rendering the inline SVG string.
2. **Div**:
	* Pros: Faster since it doesn't require parsing or rendering an SVG string.
	* Cons: Less flexible and more difficult to modify the content at runtime.

**Library Used**

The benchmark uses React, a popular JavaScript library for building user interfaces. In this case, React is used to create React elements, which are then rendered using `ReactDOM.render`.

**Special JS Feature or Syntax**

None mentioned in the provided code.

**Other Considerations**

When choosing between these two approaches, consider the following factors:

* **Flexibility**: If you need to modify the SVG content at runtime, the inline SVG approach might be a better choice. However, if you can predefine the SVG content and don't need to modify it, the div approach could be faster.
* **Performance**: The div approach is likely to be faster since it doesn't require parsing or rendering an SVG string.

**Alternatives**

If you're not using React or want to explore other options, here are some alternatives:

1. **Canvas**: You can use the `canvas` element to render SVG content. This might offer better performance than the inline SVG approach.
2. **SVG.js**: This is another library that allows you to render SVG elements in JavaScript applications.
3. **Pure SVG**: If you're using a browser that supports it, you can use the `<svg>` element directly without any libraries or frameworks.

Keep in mind that each of these alternatives has its own trade-offs and might not offer the same level of flexibility as React's inline SVG approach.

Related benchmarks:

inline svg vs divas (version: 0)

Comparing performance of: Inline SVG vs Div

Created: 3 years ago by: Guest

Jump to the latest result

Inline SVG

Div

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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