Benchmark: inline svg vs use

HTML Preparation code:

<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
	<defs><!-- make sure it does not get rendered here -->
		<g id="shape-collapse"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" /></g>
	</defs>
</svg>
<div id="main"></div>

Script Preparation code:

function InlineSVG(){
  var div = document.getElementById("main");
  div.innerHtml = `<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
	<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" /></g>
</svg>`;
}
function UseSVG(){
  var div = document.getElementById("main");
  div.innerHtml = `<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
    <use xlink:href="#shape-collapse"></use>
</svg>`;
}

Tests:

InlineSVG
InlineSVG()
UseSVG
UseSVG()

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
InlineSVG
UseSVG

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 135 on Windows

View result in a separate tab

Test name	Executions per second
InlineSVG	15223520.0 Ops/sec
UseSVG	15225740.0 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 JavaScript microbenchmarks!

The provided JSON represents a benchmark test case on MeasureThat.net, where users can compare the performance of two different approaches: using inline SVG and using an `svg` element with the `<use>` tag.

**What is tested?**

In this test, we have two functions:

1. `InlineSVG()`: This function creates an SVG element directly in the HTML string, without any wrapping elements.
2. `UseSVG()`: This function uses the `<use>` tag to reference a defined SVG shape (`<shape-collapse>`) within another SVG document.

The test measures the execution time of both functions when executed in different browsers (Chrome 128) on a desktop device with Windows operating system.

**Options compared**

We have two options being compared:

1. **Inline SVG**: This approach involves creating an SVG element directly in the HTML string, which can be beneficial for small, self-contained SVGs.
2. **<use> tag**: This approach uses a `<use>` tag to reference a defined SVG shape within another SVG document. This allows for better maintainability and reusability of SVG code.

**Pros and Cons**

Here are some pros and cons of each approach:

**Inline SVG**

Pros:

* Better cache performance, as the SVG data is included in the HTML string.
* Can be beneficial for small, self-contained SVGs.

Cons:

* May lead to slower rendering times, as the browser needs to parse and render the entire SVG string.
* Not suitable for large or complex SVGs.

**<use> tag**

Pros:

* Allows for better maintainability and reusability of SVG code.
* Can reduce rendering time, as the browser only needs to load and render the referenced shape.

Cons:

* May lead to slower execution times due to additional parsing and rendering steps.
* Requires a defined `svg` document with the `<use>` tag set up correctly.

**Other considerations**

When working with SVGs, it's essential to consider factors like cache performance, rendering time, and maintainability. The choice of approach ultimately depends on the specific use case and requirements.

If you need to optimize SVG performance, you may also want to explore other techniques, such as:

* Using `svg` attributes (e.g., `width`, `height`) instead of CSS styles.
* Utilizing browser-specific features like WebGL or WebAssembly for rendering.
* Leveraging modern web performance tools and optimization techniques.

**Library**

In this test case, there is no explicit library mentioned. However, the use of SVG elements and the `<use>` tag suggests that the test might be using a default or built-in implementation of these elements in the browser.

If you're interested in exploring libraries for working with SVGs, some popular options include:

* `svg.js`: A lightweight SVG parsing and manipulation library.
* `svgdom`: A modern SVG parsing and rendering library.

Keep in mind that the choice of library will depend on your specific project requirements and performance needs.

I hope this explanation helps you understand the test case and its implications for optimizing JavaScript performance!

Related benchmarks:

inline svg vs use (version: 0)

Comparing performance of: InlineSVG vs UseSVG

Created: one year ago by: Registered User

Jump to the latest result

InlineSVG

UseSVG

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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