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>

​x
 
<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"
    );
}

 
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"));
ReactDOM.render(React.createElement(SVGInline, null), document.querySelector("#main"));
Div
ReactDOM.render(React.createElement(DivTest, null), document.querySelector("#main"));
ReactDOM.render(React.createElement(DivTest, null), document.querySelector("#main"));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
Inline SVG
Div

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 101 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Inline SVG	319281.6 Ops/sec
Div	335861.0 Ops/sec

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

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

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.
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

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.
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:

Canvas: You can use the canvas element to render SVG content. This might offer better performance than the inline SVG approach.
SVG.js: This is another library that allows you to render SVG elements in JavaScript applications.
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.

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: 2 years 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 llama3.2:3b, generated 6 months ago):