Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
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
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>
Run tests (2)
Previous results
Fork
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
Embed
Embed Benchmark Result
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):
### 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:
setAttribute vs svgtransform
TY_svg_stackCompare_v004
TY_svg_stackCompare_v006
TY_svg_stackCompare_v007
TY_svg_stackCompare_v008
Strip svg tags
svg: DOMParser vs innerHTML
test svg parsing
Setting SVG transform attribute
Comments
Confirm delete:
Do you really want to delete benchmark?