Re: [css3-images] Some issues with 'object-fit'/'object-position'

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