Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

SVG in Object Size and Alignment are Inconsistent #96

Closed
andrewheins opened this Issue May 24, 2012 · 5 comments

Comments

Projects
None yet
2 participants

Expected Behaviour

When an SVG file is used in an object tag, without a defined width and height in the svg file, and with a set viewbox attribute, most browsers proportionally scale the svg (and 'object' element) to the size of the container. You can then modify the size of the vector image through width and height attributes on the object tag, or by applying css rules to the object

Observed Behaviour

Case 1: Object displays inline, ignores size of container and grows to approx 2x the svg's stated viewbox size
Safari 4.0, 5.1, 5.2
Chrome 14.0

Case 2: Inline, expands to container for width and height, middle vertical-aligned
Firefox 3.0, 3.6, 4.0, 5.0 6.0, 7.0, 8.0, 9.0, 10.0,
Opera 10.0, 11.1, 11.5, 11.6

Case 3: Inline, expands to width of container, ignores container height
Firefox 11.0, 12.0,
Chrome 15.0, 16.0, 17.0, 18.0

Case 4: Inline, expands to width of container, expands slightly past height of container, middle vertical-aligned
Internet Explorer 9.0, 10.0

Example JSFiddle: http://jsfiddle.net/andrewheins/mbAkT/

Suggested Solution

The question as to exactly how an object should act is up for debate, but it's easy to normalize the behaviour to that of Case 2, which I would argue is the most intuitive of the four currently observed cases. Unfortunately, if you assume that the current stable releases of Chrome and Firefox represent the "right" representation, this is technically a step backwards.

We can normalize all browsers to Case 2 by adding the following code to normalize.css

object {
width: inherit;
height: inherit;
}

Suggested Solution JSFiddle: http://jsfiddle.net/andrewheins/mbAkT/18

I should note that I haven't actually tested the effect this change would have on the object element in all cases, and whether this would break with convention. This fix is fairly specific to SVG implementations currently.

Owner

necolas commented May 24, 2012

Hi Andrew, thanks for the detailed report.

There are probably going to be some unintended consequences to your fix when object is used in other ways. And AFAIK inherit is not supported in IE6/7…which may or may not be a good thing depending on what happens with other object cases. But this SVG inconsistency will be worth looking into. Please let me know if you discover anything else. Thanks

I'm working on setting an object baseline style, and then adding SVG support from there.

SVG isn't supported at all in IE 6/7/8 so the goal is simply to avoid adding problems while fixing modern browsers.

Inherit isn't supported in IE6/7, which is why it was my first attempt at a fix. I've got it working using an attribute selector, which fixes everything other than IE6 (again no SVG support anyway) without accidentally screwing with other use-cases of object. I'm just going to check that I'm meeting all the possible active values for type

http://jsfiddle.net/andrewheins/mbAkT/21/

I'll continue to work on this one, as it's going to start coming up as people start using vector images to target various display resolutions in responsive design.

Owner

necolas commented May 24, 2012

Thanks Andrew, that would be great.

Owner

necolas commented Dec 30, 2012

Going to pass on this as my feeling is that it should be applied via a utility class (or similar), rather than being rolled in here. The fix isn't needed if you set the dimension attributes, and it would be nice to avoid the selectors used here. Not 100% sure about this, but for the moment, on balance I feel this is the right decision. Thanks for all the work you put into this; learnt a lot from it. I hope you get around to writing it up and hopefully browser vendors can move towards fixing their inconsistencies.

@necolas necolas closed this Dec 30, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment