Intent to Ship: Support width and height as presentation attributes on nested <svg> elements

Contact emails

[email protected]

Explainer

None

Specification

https://svgwg.org/svg2-draft/geometry.html#Sizing

Summary

This feature supports applying width and height as presentation attributes on nested <svg> elements through both SVG markup and CSS. This dual approach provides even greater flexibility for developers, allowing them to manage and style SVG elements more efficiently within complex designs.

With this feature the below two html will now have the same output:

With CSS Properties for nested <svg> element:

<svg width="100px" height="100px">

  <svg style="width:50px;height:50px;">

    <circle cx="50px" cy="50px" r="40px" fill="green" />

  </svg>

</svg>

Without CSS Properties for nested <svg> element:

<svg width="100px" height="100px">

  <svg width="50px" height="50px">

    <circle cx="50px" cy="50px" r="40px" fill="green" />

  </svg>

</svg>

Blink component

Blink>SVG

TAG review

None

TAG review status

Not applicable

Risks

Interoperability and Compatibility

None

Gecko: No signal (https://github.com/mozilla/standards-positions/issues/1243)
In Firefox, the width and height attributes cannot be applied on nested <svg> elements as styles

WebKit: Neutral  (https://github.com/WebKit/standards-positions/issues/509)
In Safari, the width and height attributes cannot be applied on nested <svg> elements as styles

Web developers: Positive 7 people have upvoted this in the chromium issue.

Other signals:

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

Existing Devtools capabilities already support 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

WPTs in chromium:
https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/web_tests/external/wpt/svg/styling/nested-svg-sizing.svg
https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/web_tests/external/wpt/svg/styling/nested-svg-sizing-with-use.svg

Flag name on about://flags

None

Finch feature name

WidthAndHeightAsPresentationAttributesOnNestedSvg

Rollout plan

Will ship enabled for all users

Requires code in //chrome?

False

Tracking bug

https://issues.chromium.org/issues/40409865

Estimated milestones

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/5178789386256384?gate=5132029741760512

This intent message was generated by Chrome Platform Status

Hi Dominic, thanks for your suggestions in the I2S
As suggested, our current action involves writing WPTs to better understand the expected behavior of missing CSS values. This will enable us to present more informed and concrete results to the CSSWG and other platforms, fostering clearer discussions and more consistent implementations.

We will update the I2S once that step that done.