[SVG] Support width & height attributes on <use> and x, y, width & height on<symbol> elements as presentation attributes #553
Description
WebKittens
No response
Title of the proposal
Support width & height attributes on and x, y, width & height on elements as presentation attributes
URL to the spec
https://svgwg.org/svg2-draft/styling.html#TermPresentationAttribute
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
mozilla/standards-positions#1300
WebKit Bugzilla URL
No response
Radar URL
No response
Description
This feature enables consistent rendering of the <use> element when specifying width and height via both CSS and presentation attributes. It also adds support for x, y, width, and height as presentation attributes on <symbol>, giving developers greater control over SVG layout and positioning.
With this feature, the following two HTML examples will now produce the same output:
Using CSS for [1]:
<svg width="100px" height="100px">
<defs>
<symbol id="sym">
<rect width="100px" height="100px" fill="green"/>
</symbol>
</defs>
<use href="#sym" style="width:40px; height:40px"/>
</svg>
Using Presentation Attributes for [2]:
<svg width="100px" height="100px">
<defs>
<symbol id="sym" width="80px" height="80px" x="10" y="10">
<rect width="100px" height="100px" fill="green"/>
</symbol>
</defs>
<use href="#sym" width="40px" height="40px"/>
</svg>
In Webkit, example [2] does not currently render correctly—width and height set via presentation attributes on are not applied as expected.