- From: Daniel Holbert via GitHub <sysbot+gh@w3.org>
- Date: Mon, 18 May 2020 18:08:39 +0000
- To: public-css-archive@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.* https://www.w3.org/TR/SVG11/struct.html#SVGElementWidthAttribute *The value auto for width and height on the ‘svg’ element is treated as 100%.* https://svgwg.org/svg2-draft/geometry.html#Sizing (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`: https://jsfiddle.net/jgcnm5sL/ -- 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