Benchmark: svg inline vs use

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

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: 9 months ago)

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

Browser/OS: Chrome 130 on Windows

View result in a separate tab

Test name	Executions per second
SVGInline	449144.3 Ops/sec
SVGUse	424535.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring the performance of JavaScript microbenchmarks can be an insightful way to understand how different approaches impact rendering and execution times.

**Benchmark Definition JSON**

The provided JSON represents two benchmark definitions:

1.  **SVG Inline**: This benchmark uses `React.createElement` to create a React component with an inline SVG element (`<path>`) as its content.
2.  **SVG Use**: This benchmark also uses `React.createElement` but with a separate `<svg>` element and a nested `<use>` element referencing the same SVG path.

**Options Compared**

The two benchmarks compare different approaches to rendering SVG elements:

*   **Inline SVG**: The inline SVG approach integrates the SVG content directly into the React component.
*   **SVG Use**: The SVG use approach creates a separate `<svg>` element and references an ID in the `use` element to include the SVG path.

**Pros and Cons of Each Approach**

*   **Inline SVG**:
    *   Pros:
        *   Potential performance advantage due to reduced DOM tree size and fewer CSSOM lookups.
        *   Simplified rendering process since the SVG content is directly attached to the React component.
    *   Cons:
        *   May lead to increased bundle sizes and slower parsing times due to the additional HTML element.
*   **SVG Use**:
    *   Pros:
        *   Reduced bundle size compared to inline SVG, which can improve page load times.
        *   Simplifies maintenance by separating the SVG content from the React component.
    *   Cons:
        *   May introduce slight performance overhead due to additional DOM tree size and CSSOM lookups.

**Latest Benchmark Result**

The latest benchmark result shows the execution rates per second for each test case:

*   **SVGInline**: approximately 657555 executions/second
*   **SVGUse**: approximately 567690 executions/second

**Conclusion**

While both approaches have their trade-offs, the results suggest that inline SVG might be slightly more performant in terms of raw execution rates. However, considering factors like bundle size and maintainability, the choice between these approaches ultimately depends on your project's specific requirements.

Here are some suggestions for optimizing performance:

*   Use a combination of both approaches: Consider using inline SVG when rendering critical elements and separating complex SVG content into separate `<svg>` elements with `use` references.
*   Optimize CSSOM lookups by minimizing the number of IDs in SVG paths or using other techniques to reduce DOM tree size.

Remember, performance optimization is often a nuanced process that requires experimentation and analysis.

Related benchmarks:

svg inline vs use (version: 0)

Comparing performance of: SVGInline vs SVGUse

Created: 6 years ago by: Guest

Jump to the latest result

SVGInline

SVGUse

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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