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.
Created attachment 236088 [details] Webpage illustrating difference between dimensions of inline and external SVG (via img) when scaled proportionately
Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.