Clarify that CSS width/height properties only apply to outer svg elements#1059
Conversation
|
@dirkschulze @karlcow @nikolaszimmermann, I have raised this pull request as per the resolution on SVG WG resolution from 2026-02-05, let me know if it's okay to merge this PR |
karlcow
left a comment
karlcow
left a comment
There was a problem hiding this comment.
Thanks for editing. Just a nit comment about potential examples.
| <p class='note'> | ||
| Other SVG elements, such as nested <a>'svg'</a> elements, the <a>'use'</a> element, and | ||
| the <a>'symbol'</a> element, also have <span class='attr-name'>'width'</span> and | ||
| <span class='attr-name'>'height'</span> attributes, but do not accept them as CSS properties. | ||
| On these elements, the width and height must be specified as XML attributes; CSS properties | ||
| with the same names are ignored. | ||
| </p> |
There was a problem hiding this comment.
I wonder if there should be markup examples of what is working and not working.
Also probably all of these requires WPT tests.
There was a problem hiding this comment.
We already have few WPTs for nested/inner svg already, (which I need to update as per the resolution)
https://wpt.fyi/results/svg/styling?label=master&label=experimental&aligned&q=nested
But I can add some more for the all the elements we are targeting.
| <a>'rect'</a>, <a>'image'</a>, <a>'foreignObject'</a>, and | ||
| the outermost <a>'svg'</a> element. All of these elements have <span class='attr-name'>'width'</span> |
There was a problem hiding this comment.
+1
I was reviewing this part of the specification yesterday, and the prose hides a bit what is happening.
I can see two possibilities. An algorithmic description of what should be done or a summary table.
https://bugs.webkit.org/show_bug.cgi?id=307332
It could be done in an different issue.
There was a problem hiding this comment.
@karlcow Thanks for the suggestion, rather than a separate PR I think addressing these issues in this PR itself might be better.
I have added the table as suggested in https://bugs.webkit.org/show_bug.cgi?id=307332, it seems a pretty good addition.
A few things to note here:
- I have removed the below line, cause as per the new resolution this is no longer applicable.
<p>Content dependent units used in 'width' and 'height' for inner SVG elements resolve to SVG's definition of <a><span class='prop-value'>auto</span></a>. These content dependent units include
<a href="https://drafts.csswg.org/css-sizing-3/#valdef-width-min-content">'min-content'</a>, <a href="https://drafts.csswg.org/css-sizing-3/#valdef-width-max-content">'max-content'</a>,
<a href="https://drafts.csswg.org/css-sizing-3/#funcdef-width-fit-content">'fit-content()'</a> and <a href="https://drafts.csswg.org/css-sizing-3/#funcdef-width-calc-size">'calc-size()'</a>.</p>
-
I have added the table only for the
autovalue for now, but let me know if we should extend it. -
I have still kept the resolution of this PR as separate "notes/paragraph" cause I couldnt think of a better way to include them in the above table without messing things up.
Let me know your thoughts on this and whether some additions are needed.
goldenboy777
force-pushed
the
1057-should-width-and-height-apply-to-nested-svg-elements-as-css-properties
branch
from
6760495 to
7255113
Compare
2 participants
Per the SVG WG resolution from 2026-02-05:
This change updates Section 7.8 (Sizing properties) to:
widthandheightproperties apply only to the outermost<svg>element, not nested ones<svg>,<use>, and<symbol>elements have width/height attributes but do not accept them as CSS properties—they must be specified as XML attributes