Bug 135644 – Proportions of inline SVG element in HTML should respect width, height attributes

• Component: SVG
• Status: RESOLVED CONFIGURATION CHANGED

[Jorge]

Proportions of inline SVG in an HTML document should be taken from the `svg` element's `width` and `height` attributes, if they existing. Consequently, CSS-overriding both dimensions of that `svg` element, but setting one of them to `auto`, should scale both of them while maintaining their ratio relation.

## Steps to reproduce: ##

1.	Open <http://codepen.io/anon/pen/etblo> or open the embedded HTML file. The webpage features two instances of the same SVG object, each wrapped in a `figure` element:

	1.	One instance is inline, using an `svg` element with `width` and `height` attributes.
	2.	The other instance is linked externally (even though it is actually then embedded in the HTML with a data URI) with an `img` element. The `width` and `height` attributes have been moved from the external SVG object (the `svg` element of which, therefore, lacks them) to this `img` element.

	A minimal CSS is overriding both `svg` and `img` elements' dimensions to `width: 100%; height: auto;`, therefore stating that the height should maintain its ratio relation with the width. The `figure` element's default CSS remains as `display: block;` therefore also `width: 100%;` by ommision (and then some margin, irrelevant to this issue).

2.	Scale the browser's window to a width considerably **less** than 800px.

3.	Scale the browser's window to a width considerably **more** than 800px.

## Expected results: ##

In both 2 & 3, as the width of both `svg` and `img` elements change to fit the width of the window, their height should also change proportionally to the ratio relation between their respective `width` and `height` attributes.

## Actual results: ##

While the `img` element's height behaved as expected, the `svg` elements' height remained fixed to the value of its `height` attribute, even though it had been overridden with CSS to stay proportional to the object's original aspect ratio, which should have been taken from its `width` and `height` attributes.

Consequently, in step 2, the `svg` element displays excessive blank on its top and bottom, and in step 3, it does so too in its left and right.

## Note ##

If, like I suggest, the browser should be using the `width` and `height` attributes of an element to define its original aspect ratio, I just do not know what the browser should actually do, in the case of an SVG object linked externally with an `img` element, when both the SVG object's `svg` element and the `img` element have `width` and `height` attributes with conflicting values. But I think that how to deal with conflicting values is, at any rate, a different issue.

[Jorge]

Created attachment 236088 [details]
Webpage illustrating difference between dimensions of inline and external SVG (via img) when scaled proportionately

[Brent Fulgham]

Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.