Intent to Ship: Support transform attribute on SVGSVGElement
Divyansh Mangal
Contact emails
Explainer
None
Specification
https://www.w3.org/TR/SVG2/struct.html#SVGElement
Summary
This feature enables the application of transformation properties—such as scaling, rotation, translation, and skewing—directly to the <svg> root element via its transform attribute. This enhancement allows developers to manipulate the entire SVG coordinate system or its contents as a whole, providing greater flexibility in creating dynamic, responsive, and interactive vector graphics. By supporting this attribute, the SVG element can be transformed without requiring additional wrapper elements or complex CSS workarounds, streamlining the process of building scalable and animated web graphics.
Blink component
TAG review
None
TAG review status
Not applicable
Risks
Interoperability and Compatibility
None
Gecko: Shipped/Shipping (https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/transform#:~:text=You%20can%20use%20this%20attribute%20with%20any%20SVG%20element)
WebKit: No signal (https://bugs.webkit.org/show_bug.cgi?id=107394)
Web developers: Positive (https://stackoverflow.com/questions/33058883/nested-svg-ignores-transformation-in-chrome-and-opera?noredirect=1&lq=1)
Other signals: There are 22 upvotes for this bug in the chromium issue: https://issues.chromium.org/issues/40313130
WebView application risks
Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?
None
Debuggability
No additional Devtools support is needed to debug this feature.
Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?
Yes
Is this feature fully tested by web-platform-tests?
Yes
https://wpt.fyi/results/svg/struct/reftests/outer-svg-transform.svg?label=experimental&label=master&aligned
https://wpt.fyi/results/svg/struct/reftests/inner-svg-transform.svg?label=experimental&label=master&aligned
https://wpt.fyi/results/svg/struct/reftests/inner-svg-css-transform.svg?label=experimental&label=master&aligned
https://wpt.fyi/results/svg/struct/reftests/inner-svg-rotate-transform.svg?label=experimental&label=master&aligned
https://wpt.fyi/results/svg/struct/reftests/inner-svg-transform-and-viewbox.svg?label=experimental&label=master&aligned
Flag name on about://flags
None
Finch feature name
SvgTransformOnNestedSvgElement
Rollout plan
Will ship enabled for all users
Requires code in //chrome?
False
Tracking bug
https://issues.chromium.org/issues/40313130
Estimated milestones
|
Shipping on desktop |
137 |
|
Shipping on Android |
137 |
|
Shipping on WebView |
137 |
|
Shipping on iOS |
137 |
Anticipated spec changes
Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).
None
Link to entry on the Chrome Platform Status
https://chromestatus.com/feature/6129368025530368?gate=6210216489910272
This intent message was generated by Chrome Platform Status.
Mike Taylor
On 4/22/25 9:54 AM, 'Divyansh Mangal' via blink-dev wrote:
Contact emails
Explainer
None
Specification
https://www.w3.org/TR/SVG2/struct.html#SVGElement
Summary
This feature enables the application of transformation properties—such as scaling, rotation, translation, and skewing—directly to the <svg> root element via its transform attribute. This enhancement allows developers to manipulate the entire SVG coordinate system or its contents as a whole, providing greater flexibility in creating dynamic, responsive, and interactive vector graphics. By supporting this attribute, the SVG element can be transformed without requiring additional wrapper elements or complex CSS workarounds, streamlining the process of building scalable and animated web graphics.
Blink component
TAG review
None
TAG review status
Not applicable
Risks
Interoperability and Compatibility
None
Gecko: Shipped/Shipping (https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/transform#:~:text=You%20can%20use%20this%20attribute%20with%20any%20SVG%20element)
WebKit: No signal (https://bugs.webkit.org/show_bug.cgi?id=107394)
Web developers: Positive (https://stackoverflow.com/questions/33058883/nested-svg-ignores-transformation-in-chrome-and-opera?noredirect=1&lq=1)
Other signals: There are 22 upvotes for this bug in the chromium issue: https://issues.chromium.org/issues/40313130
WebView application risks
Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?
None
Debuggability
No additional Devtools support is needed to debug this feature.
Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?
Yes
Is this feature fully tested by web-platform-tests?
Yes
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/KUXP153MB13244C280F9ECE6C3BD4F15DADBB2%40KUXP153MB1324.APCP153.PROD.OUTLOOK.COM.
Daniel Bratell
LGTM1
(memories of 2011, that was a while ago)
/Daniel
--
Divyansh Mangal
Hi Mike, thanks for your queries, below are my corresponding responses:
> Can we file an official standards-position issue please?
I have filed an official WebKit standard-position issue on this. And have updated the URL https://github.com/WebKit/standards-positions/issues/483 in the I2S as well. Thanks for pointing it out.
I notice that this test passes in Edge, while the rest don't. Do we know why?
Yes, we do know why!!
First, the reason why other tests are failing in Edge is that the feature-related code is not yet available in the Edge 137 dev version, which is the version the wpt.fyi UI is comparing the tests on. For example, for the tests that are failing in Edge, you
can see that even in Chrome there was a brief period where the tests were failing, then they started passing once the wpt.fyi UI started comparing on the version which had the code.
As another example, please look at the timeline for Edge for another WPT that I merged:https://wpt.fyi/results/svg/geometry/svg-get-bounding-client-rect-in-non-rendered-elements.html?label=experimental&label=master&aligned
where the test was failing and then started passing once the correct version was available.
Secondly, the reason this particular test https://wpt.fyi/results/svg/struct/reftests/outer-svg-transform.svg?label=experimental&label=master&aligned is passing is because we already support transform on outer <svg> elements and this test verifies transform on outer <svg> element. This feature enhances the transform capability to now be applicable on nested <svg> elements as well. The reason I wrote this test was to make sure that the existing functionality of outer <svg> transform is not broken due to my changes.
I hope that does answer your questions but let me know if you need more clarification!
With Regards
Divyansh
Mike Taylor
(removing Microsoft-specific alias that keeps bouncing)
LGTM2
Hi Mike, thanks for your queries, below are my corresponding responses:
> Can we file an official standards-position issue please?I have filed an official WebKit standard-position issue on this. And have updated the URL https://github.com/WebKit/standards-positions/issues/483 in the I2S as well. Thanks for pointing it out.
I notice that this test passes in Edge, while the rest don't. Do we know why?
Yes, we do know why!!
First, the reason why other tests are failing in Edge is that the feature-related code is not yet available in the Edge 137 dev version, which is the version the wpt.fyi UI is comparing the tests on. For example, for the tests that are failing in Edge, you can see that even in Chrome there was a brief period where the tests were failing, then they started passing once the wpt.fyi UI started comparing on the version which had the code.
As another example, please look at the timeline for Edge for another WPT that I merged:https://wpt.fyi/results/svg/geometry/svg-get-bounding-client-rect-in-non-rendered-elements.html?label=experimental&label=master&aligned where the test was failing and then started passing once the correct version was available.
Secondly, the reason this particular test https://wpt.fyi/results/svg/struct/reftests/outer-svg-transform.svg?label=experimental&label=master&aligned is passing is because we already support transform on outer <svg> elements and this test verifies transform on outer <svg> element. This feature enhances the transform capability to now be applicable on nested <svg> elements as well. The reason I wrote this test was to make sure that the existing functionality of outer <svg> transform is not broken due to my changes.
I hope that does answer your questions but let me know if you need more clarification!
Yoav Weiss (@Shopify)
To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/395f2283-7760-40b1-a8bd-e11f27ede39b%40chromium.org.