W3C home > Mailing lists > Public > public-css-archive@w3.org > May 2020

Re: [csswg-drafts] [css-sizing-4] Should aspect-ratio apply for width: auto; height: auto;? (#5060)

From: Daniel Holbert via GitHub <sysbot+gh@w3.org>
Date: Mon, 18 May 2020 18:08:39 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-630349152-1589825318-sysbot+gh@w3.org>
> Thanks @dholbert ; two questions:
>  * You mention an implicit `width: 100%`, but I didn't think SVGs did that?

I'm talking about how the lacuna value of the `<svg width=...>` attribute is `100%`.  Spec references:

*If the [width/height] attribute is not specified, the effect is as if a value of '100%' were specified.*

*The value auto for width and height on the ‘svg’ element is treated as 100%.*

(I suspect this isn't meant to actually behave as 100% in this context, though, so this may be a Firefox bug.)

> * Your last testcase is not quite right because an explicit width attribute is different from an implicit size/aspect ratio, see https://jsfiddle.net/y1z9ohpL/ and https://jsfiddle.net/y1z9ohpL/1/

Your testcase here is comparing `width` and `height` attributes against `viewBox` attribute.

These attributes do different things, intrinsic-sizing-wise.

The `viewBox` attribute **only** sets the intrinsic aspect ratio of a SVG element -- it **does not set the intrinsic size**.  For an apples-to-apples comparison between `<svg>` and `<img src="some-raster-image.png">`, you need to provide pixel-valued width & height attribute-values on the SVG element (even if these attributes are not present on the img element).

The `width` and `height` attributes (if given a definite value) are what provide the intrinsic size, for SVG.  This is easiest to reason about in an example where we have `<img src="foo.svg">` with `foo.svg` containing `<svg height="16" width="16" viewBox="0 0 100 100">`, vs. another `bar.svg` which has `<svg viewBox="0 0 100 100">`.  In both cases, the intrinsic aspect ratio is 1:1. The former case has an intrinsic size of 16x16. The latter case has no intrinsic size (but still has an intrinsic aspect ratio of 16x16).

Anyway -- the Chrome/Firefox difference on your second fiddle is merely an example of us (probably-mistakenly) using the lacuna "width=100%" value on the SVG element when establishing its flex-basis, as you can see if you add `flex-shrink:0`:

GitHub Notification of comment by dholbert
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5060#issuecomment-630349152 using your GitHub account
Received on Monday, 18 May 2020 18:08:41 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:06 UTC