Benchmark: Stroke-width vs vector-effect

HTML Preparation code:

<svg>
  <rect id="foo" w="10px" h="10px" fill="none" stroke="#CCC" stroke-width={1)/>
  <rect id="bar" w="10px" h="10px" fill="none" stroke="#CCC" stroke-width={1) vector-effect="non-scaling-stroke"/>
</svg>

Script Preparation code:

var elementA = document.getElementById("foo");
var elementB = document.getElementById("bar");

Tests:

stroke-width
var i = 10000; while (i--) { elementA.setAttribute("transform", "scale(2)"); elementA.setAttribute("stroke-width", 0.5); elementA.setAttribute("transform", ""); }
vector-effect
var i = 10000; while (i--) { elementB.setAttribute("transform", "scale(2)"); elementB.setAttribute("transform", ""); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
stroke-width
vector-effect

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.

**Overview**

The provided JSON represents a benchmark test on MeasureThat.net, which compares the performance of two approaches to scale an SVG rectangle: using `stroke-width` or `vector-effect`. The test measures the number of executions per second for each approach.

**Benchmark Definition**

The benchmark definition includes:

* **Name**: "Stroke-width vs vector-effect"
* **Description**: This test compares the performance of scaling a stroke and countering the scale by using either `stroke-width` or `vector-effect`.
* **Script Preparation Code**: The script creates two SVG elements, `elementA` and `elementB`, and sets up the initial transformations.
* **Html Preparation Code**: The HTML code defines an `<svg>` element with two `<rect>` elements, `foo` and `bar`, each with different stroke width and transformation settings.

**Individual Test Cases**

The test consists of two individual test cases:

1. **Stroke-width**
	* **Benchmark Definition**: This script sets the `transform` attribute to scale the SVG by a factor of 2 and then resets it, while also setting the `stroke-width` to 0.5.
	* **Test Name**: "stroke-width"
2. **Vector-effect**
	* **Benchmark Definition**: This script sets the `transform` attribute to scale the SVG by a factor of 2 and then resets it, without using `stroke-width`.
	* **Test Name**: "vector-effect"

**Options Compared**

The two options being compared are:

1. Using `stroke-width` to control the stroke width.
2. Using `vector-effect` to control the transformation.

**Pros and Cons**

* **Stroke-width**:
	+ Pros: Can be more intuitive and easier to implement, especially for simple transformations.
	+ Cons: May introduce additional overhead or complexities, such as calculating the new stroke width.
* **Vector-effect**:
	+ Pros: Provides a more efficient and optimized way of applying transformations, which can lead to better performance.
	+ Cons: May be more complex to implement and understand, especially for advanced transformations.

**Library**

In this benchmark, the `vector-effect` library is used. The specific library being referenced is not specified in the provided JSON, but based on the code, it appears to be a standard SVG transformation library that provides an optimized way of applying transformations without modifying the stroke width.

**Special JS Feature or Syntax**

None mentioned in the provided JSON.

Related benchmarks:

Stroke-width vs vector-effect (version: 0)

Scaling a stroke and countering the scale by using stroke-width or vector-effect.

Comparing performance of: stroke-width vs vector-effect

Created: 3 years ago by: Registered User

Jump to the latest result

stroke-width

vector-effect

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