Benchmark: Overriding SVG transform attribute

HTML Preparation code:

<svg id="svg"><g id="node" transform="translate(10, 10) scale(20, 20)"/></svg>

Script Preparation code:

const node = document.getElementById('node');
const svg = document.getElementById('svg');
const matrix = svg.createSVGMatrix();
matrix.a = 2;
matrix.d = 2;

function matrixToTransformString(matrix) {
    return `matrix(${matrix.a}, ${matrix.b}, ${matrix.c}, ${matrix.d}, ${matrix.e}, ${matrix.f})`;
}

Tests:

el.setAttribute
node.setAttribute('transform', matrixToTransformString(matrix));
el.transform.baseVal.appendItem
const transform = svg.createSVGTransform(); transform.setMatrix(matrix); const transformList = node.transform.baseVal; if (transformList.numberOfItems > 0) { transformList.clear(); } transformList.appendItem(transform);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
el.setAttribute
el.transform.baseVal.appendItem

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
el.setAttribute	2933364.2 Ops/sec
el.transform.baseVal.appendItem	3426995.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

### Benchmark Overview

The benchmark tests the performance of two different approaches to modifying the `transform` attribute of an SVG element in the browser. It compares the use of the SVGTransform API against the traditional `setAttribute` method of setting attributes in the DOM.

### Method 1: Using `setAttribute`

- **Benchmark Definition**:
  - This method uses `node.setAttribute('transform', matrixToTransformString(matrix));` to set the `transform` attribute of the SVG element directly as a string.
- **Pros**:
  - **Simplicity**: The code is straightforward and easy to understand since it is just a string manipulation.
  - **Compatibility**: The `setAttribute` method is widely supported across all browsers.
- **Cons**:
  - **Performance**: It can be slower due to the process of parsing the string representation by the browser.
  - **No Intermediate State**: Directly manipulating the attribute means there's no intermediate state or management of transform objects.

### Method 2: Using `SVGTransform API`

- **Benchmark Definition**:
  - This method involves more steps:
    1. Create an instance of `SVGTransform` with `const transform = svg.createSVGTransform();`.
    2. Set the matrix with `transform.setMatrix(matrix);`.
    3. Modify the `transform.baseVal` list to manage transforms directly.
- **Pros**:
  - **Performance**: Generally faster as it allows for more efficient DOM manipulation of transform lists, particularly if you're frequently changing multiple transforms.
  - **Better Management**: Using the SVGTransform API allows for better manageability of multiple transforms, as you can easily append, remove, or modify transforms without needing to parse or convert strings.
- **Cons**:
  - **Complexity**: The code is more complex and harder to read for someone unfamiliar with the SVG API.
  - **Browser Support**: While broadly supported, the handling of SVG transforms is more specific to SVG and might not be as well-known as standard DOM attributes.

### Benchmark Results

The benchmark results show the execution speeds for both methods under the same conditions in Chrome 135 on macOS:

1. **SVG Transform API (`el.transform.baseVal.appendItem`)**:
   - Executions Per Second: **3,688,691.5**

2. **`setAttribute()` method (`el.setAttribute`)**:
   - Executions Per Second: **3,223,878.75**

From the results, the `el.transform.baseVal.appendItem` method performed better compared to `el.setAttribute`, indicating that manipulating transforms with the SVG API can provide performance gains, particularly when the transformations are more complex or when multiple transformations need to be applied.

### Alternatives

- **CSS Transforms**: For many scenarios, especially for simpler transformations (like translation, scaling, etc.), CSS transformations can be a viable alternative. They can be animated easily with CSS properties and may leverage hardware acceleration for smoother performance.
- **WebGL**: For complex graphics needs, especially with performance-critical applications (like games or interactive visualizations), using WebGL can significantly outperform SVG by offloading processing to the GPU.
- **Canvas API**: If the objective is more bitmap-oriented rendering instead of vector graphics, the HTML5 Canvas API can be an alternative for rendering graphics with a different performance profile, especially for dynamic drawings that need to be redrawn frequently.

By choosing the appropriate method or library based on the specific use case, software engineers can optimize for both performance and maintainability in their web applications.

Related benchmarks:

Overriding SVG transform attribute (version: 1)

Use SVGTransform API vs setAttribute()

Comparing performance of: el.setAttribute vs el.transform.baseVal.appendItem

Created: one year ago by: Registered User

Jump to the latest result

el.setAttribute

el.transform.baseVal.appendItem

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):