[SVG] Support for width and height as css attributes on <use> element

[viralipurbey]

trafficstars

WebKittens

No response

Title of the proposal

Support for width and height as css attributes on use element

URL to the spec

https://www.w3.org/TR/SVG2/struct.html#UseElement

URL to the spec's repository

No response

Issue Tracker URL

No response

Explainer URL

No response

TAG Design Review URL

No response

Mozilla standards-positions issue URL

No response

WebKit Bugzilla URL

No response

Radar URL

No response

Description

The SVG 2.0 specification introduces support for applying CSS width and height to element, enabling more flexible and consistent styling of reused SVG content. This enhancement allows developers to control element sizing through CSS, improving responsiveness and aligning SVG behavior with modern web styling practices.

With this feature enabled, the following two HTML snippets will now render identically:

Using CSS Properties on the element [1]:

<svg width="100px" height="100px">
 <defs>
    <symbol id="sym" width="80" height="80">
      <rect width="100" height="100" fill="green"/>
    </symbol>
  </defs>
  <use href="#sym" style="width:40px; height:40px"/>
</svg>

Using presentation attributes on the element [2]:

<svg width="100px" height="100px">
 <defs>
    <symbol id="sym" width="80" height="80">
      <rect width="100" height="100" fill="green"/>
    </symbol>
  </defs>
  <use href="#sym" width="40" height="40"/>
</svg>

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