- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Sun, 6 Mar 2011 18:29:15 -0800
- To: Jonathan Watt <jwatt@jwatt.org>
- Cc: www-style@w3.org, www-svg <www-svg@w3.org>, public-fx@w3.org
I apologize that I haven't yet rewritten the 'object-fit' section so that it references the correct terms and stages in the sizing algorithm immediately above it; the current text was written before I had written that algorithm, and hasn't been changed significantly since. It's very unclear from the current wording that there's absolutely no conflict with SVG, and that everything is totally fine. The sizing algorithm, which 'object-fit' ties into (it exercises the final clause of section 6.3 of Image Values, as it applies "additional constraints"), results in a "concrete object size". In SVG terms, this is the "SVG Viewport", defined in section 7.0 of SVG. According to section 7.2 of SVG, CSS is allowed to determine the size of the SVG Viewport using its own rules, as long as the SVG is being embedded and CSS is applying appropriate sizing properties. (SVG for some reason references CSS's 'position' and related properties, which aren't relevant for the determining the size of replaced elements, but I'll interpret that third bullet point in 7.2 as referencing the relevant properties). Assuming that a viewBox is defined on the root <svg> element, and preserveAspectRatio has its default value, then the behavior produced by the above is exactly what implementations currently expose. The replaced element, such as <img>, is first sized as normal for a replaced element using CSS layout. 'object-fit:fill' sets the "concrete object size", and thus the "SVG Viewport", to the size of the <img>. SVG then uses the values for viewBox and preserveAspectRatio to make the root <svg> element be as large as possible, while preserving the aspect ratio, without overflowing the SVG Viewport, and additionally positions the root <svg> element in the center of the SVG Viewport. Overall, the thing to keep in mind is that when SVG is embedded, SVG's sizing rules only control the root <svg> element itself, and *not* the SVG Viewport, which is instead defined by the embedding context*. CSS in the embedder only ever manipulates the SVG Viewport, which it calls the "concrete object size". In particular, 'object-fit:fill' and 'object-fit:contain', when combined with an SVG image without @width or @height, with @viewBox, and with the default values for @preserveAspectRatio, result in SVG images of *identical size* - the only difference is that in the former case the image fills the <img> and so the SVG Canvas is seen outside the <svg> element, while in the latter case the image exactly wraps the <svg> element and shows the <img>'s background around that. * Caveat: SVG's sizing rules do determine the image's intrinsic dimensions, which are consulted by the embedding context when determining the concrete object size. ~TJ
Received on Monday, 7 March 2011 02:31:55 UTC