standards-positions icon indicating copy to clipboard operation
standards-positions copied to clipboard

[SVG] Support width and height as presentation attributes on nested <svg> elements

Open goldenboy777 opened this issue 4 months ago • 9 comments

WebKittens

No response

Title of the proposal

[SVG] Support width and height as presentation attributes on nested svg elements

URL to the spec

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

URL to the spec's repository

No response

Issue Tracker URL

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

Explainer URL

No response

TAG Design Review URL

No response

Mozilla standards-positions issue URL

https://github.com/mozilla/standards-positions/issues/1243

WebKit Bugzilla URL

No response

Radar URL

No response

Description

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 [1]:

<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 [2]:

<svg width="100px" height="100px">
  <svg width="50px" height="50px">
    <circle cx="50px" cy="50px" r="40px" fill="green" />
  </svg>
</svg>

Note that in WebKit currently the [1] example gives incorrect result, that is, width and height as styles are not applied on nested svg element.

goldenboy777 avatar Jun 10 '25 05:06 goldenboy777