SVG sizing inside <object>

Hi!

I'm following-up on <https://github.com/w3c/web-platform-tests/pull/718>
which attempts to add test for svg-in-<object> sizing for a lot of
common situations. In the corresponding review
<https://critic.hoppipolla.co.uk/r/938> philipj asks for domain
expertise so if you have input on this, please raise issues on the
review.

In relation to this I've been asked 'so what does IE do?'? So I've
investigated how IE(11) sizes SVG inside <object> and if there's
something there we can learn. (Some of this applies to inline SVGs as
well. Some of it may be plain bugs.)

This is my first observations:

 * IE sometimes doesn't always use the intrinsic ratio given from
   viewBox (e.g. <svg viewBox="0 0 16 9 ... >" would give a 16:9 ratio)
   the way other browsers do.

   In[1]

   <object id="test" data="data:image/svg+xml,<svg
   xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100
   200"></svg>"></object>

   the width comes from the container, but the height becomes 150. I'd
   expect it to compute height from ratio and width. However, when the
   width is *specified* on <object>, as in[2]:

   <object id="test" width="100px" data="data:image/svg+xml,<svg
   xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100
   200"></svg>"></object>

   then the proper height is calculated. But when moving the width into
   the <svg>, like this[3]:

   <object id="test" data="data:image/svg+xml,<svg
   xmlns="http://www.w3.org/2000/svg" width="200px" viewBox="0 0 100
   200"></svg>"></object>

   the height flips back to 150 again.

 * Basically, as long as there is a specified width from an ancestor
   (i.e non-shrink-to-fit context), IE sizes the <object> as a block,
   regardless if the SVG has an intrinsic ratio or not.

   Example[4]:

   <object id="test" data="data:image/svg+xml,<svg
   xmlns="http://www.w3.org/2000/svg"></svg>"></object>

   As a consequence of not deducing intrinsic widths (or heights), the
   following test becomes container wide[5]:

   <object id="test" data="data:image/svg+xml,<svg
   xmlns="http://www.w3.org/2000/svg" height="200px" viewBox="0 0 100
   200"></svg>"></object>

   This sample is also one of those that render in three different ways
   in IE/Chrome/FF.

 * A percentage height that doesn't resolve to anything still affects
   the end result[6]:

   <div><object id="test" height="50%" data="data:image/svg+xml,<svg
   xmlns="http://www.w3.org/2000/svg" width="200px"
   height="200px"></svg>"></object></div>

   Removing the height="50%" and the size is correctly computed to
   200x200.

So there's some strange corners. I still think Firefox has the sanest
<object> sizing even though it falls into the 300x150 trap for some
combinations. I think we should update the specification so that it
becomes clear what's right and wrong here.

David

In the samples above I've unquoted the object data for readability. The
links below contains ready-to-run versions:

[1] http://people.opera.com/davve/svg-in-object/svg-in-object-test-010.html
[2] http://people.opera.com/davve/svg-in-object/svg-in-object-test-064.html
[3] http://people.opera.com/davve/svg-in-object/svg-in-object-test-013.html
[4] http://people.opera.com/davve/svg-in-object/svg-in-object-test-001.html
[5] http://people.opera.com/davve/svg-in-object/svg-in-object-test-011.html
[6] http://people.opera.com/davve/svg-in-object/svg-in-object-test-041.html

Received on Monday, 17 March 2014 15:28:45 UTC