135644 2014-08-06 03:36:52 -0700 Proportions of inline SVG element in HTML should respect width, height attributes 2022-07-15 17:00:26 -0700 1 1 1 Unclassified WebKit SVG 528+ (Nightly build) Unspecified Unspecified RESOLVED CONFIGURATION CHANGED http://codepen.io/anon/pen/etblo P2 Normal --- 1 chocolate.camera webkit-unassigned bfulgham zimmermann oldest_to_newest 1027115 0 chocolate.camera 2014-08-06 03:36:52 -0700 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. 1027117 1 236088 chocolate.camera 2014-08-06 03:39:57 -0700 Created attachment 236088 Webpage illustrating difference between dimensions of inline and external SVG (via img) when scaled proportionately 1884436 2 bfulgham 2022-07-15 17:00:26 -0700 Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue. 236088 2014-08-06 03:39:57 -0700 2014-08-06 03:39:57 -0700 Webpage illustrating difference between dimensions of inline and external SVG (via img) when scaled proportionately SVG aspect ratio.html text/html 1862 chocolate.camera PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KCTxtZXRhIGNoYXJzZXQ9IlVURi04Ii8+Cgk8 dGl0bGU+U1ZHIHByb3BvcnRpb25hbCBzY2FsZSB0ZXN0PC90aXRsZT4KCTxzdHlsZT4KCQlpbWcs IHN2ZyB7CgkJCXdpZHRoOiAxMDAlOwoJCQloZWlnaHQ6IGF1dG87CgkJfQoJCWZpZ2NhcHRpb24g ewoJCQl0ZXh0LWFsaWduOiBjZW50ZXI7CgkJfQoJPC9zdHlsZT4KPC9oZWFkPgo8Ym9keT4KCTxw PkxvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0 LiBQYXJpYXR1ciBtYWduaSBhdHF1ZSwgZnVnaWF0IGJsYW5kaXRpaXMgaWQgbm9uIHZpdGFlIHJl aWNpZW5kaXMgdm9sdXB0YXRlcyBuZXF1ZSBkb2xvcnVtIHZlcml0YXRpcywgdXQgbWFpb3JlcyBp bGxvLCBlYSBxdWlkZW0gY3VwaWRpdGF0ZSB0ZW1wb3JhIHN1c2NpcGl0IG1vbGxpdGlhIQoJPC9w PgoJPGZpZ3VyZT4KCQk8ZmlnY2FwdGlvbj5JbmxpbmUgU1ZHPC9maWdjYXB0aW9uPgoJCTxzdmcg dmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhs aW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4 TWlkWU1pZCBtZWV0IiB2aWV3Qm94PSIwIDAgODAwIDQwMCIgaGVpZ2h0PSI0MDAiICB3aWR0aD0i ODAwIj4KCQkJPHJlY3QgZmlsbD0iI0U5NDEwMCIgaGVpZ2h0PSI0MDAiIHdpZHRoPSI4MDAiLz4K CQk8L3N2Zz4KCTwvZmlndXJlPgoJPHA+RG9sb3JlIGNvcnJ1cHRpIHNpdCBtb2xsaXRpYSBpc3Rl LCB2b2x1cHRhdGVzIGNvbnNlcXVhdHVyIGFzcGVybmF0dXIgdXQgcG9ycm8gcXVpYSBhdXQgY29t bW9kaSBpcHN1bSBuYW0gcGxhY2VhdCBmYWNpbGlzIGRpc3RpbmN0aW8gYXV0ZW0gbm9zdHJ1bSBv cHRpbyBleGNlcHR1cmkgbmlzaSBxdWlidXNkYW0sIHByb3ZpZGVudCBxdWFtIGZhY2VyZSBxdWlk ZW0hIEV4LCBwcm92aWRlbnQuCgk8L3A+Cgk8ZmlndXJlPgoJCTxmaWdjYXB0aW9uPlNWRyBsaW5r ZWQgYXMgYW4gaW1hZ2U8L2ZpZ2NhcHRpb24+CgkJPGltZyBhbHQ9IiIgc3JjPSJkYXRhOmltYWdl L3N2Zyt4bWw7YmFzZTY0LFBEOTRiV3dnZG1WeWMybHZiajBpTVM0d0lpQmxibU52WkdsdVp6MGlk WFJtTFRnaVB6NEtQQ0ZFVDBOVVdWQkZJSE4yWndvZ0lGQlZRa3hKUXlBbkxTOHZWek5ETHk5RVZF UWdVMVpISURFdU1TOHZSVTRuQ2lBZ0oyaDBkSEE2THk5M2QzY3Vkek11YjNKbkwwZHlZWEJvYVdO ekwxTldSeTh4TGpFdlJGUkVMM04yWnpFeExtUjBaQ2MrQ2p4emRtY2dkbVZ5YzJsdmJqMGlNUzR4 SWlCMmFXVjNRbTk0UFNJd0lEQWdPREF3SURRd01DSWdlRzFzYm5NOUltaDBkSEE2THk5M2QzY3Vk ek11YjNKbkx6SXdNREF2YzNabklpQjRiV3h1Y3pwNGJHbHVhejBpYUhSMGNEb3ZMM2QzZHk1M015 NXZjbWN2TVRrNU9TOTRiR2x1YXlJZ2NISmxjMlZ5ZG1WQmMzQmxZM1JTWVhScGJ6MGllRTFwWkZs TmFXUWdiV1ZsZENJK0NnazhjbVZqZENCbWFXeHNQU0lqUlRrME1UQXdJaUJvWldsbmFIUTlJalF3 TUNJZ2QybGtkR2c5SWpnd01DSXZQZ284TDNOMlp6ND0iIGhlaWdodD0iNDAwIiAgd2lkdGg9Ijgw MCIgLz4KCTwvZmlndXJlPgoJPHA+RWxpZ2VuZGkgcmVwZWxsZW5kdXMgc29sdXRhLCBhbGlxdWlk IHN1c2NpcGl0IGRlbGVjdHVzLCBxdWkgZmFjZXJlIGVhIGl1cmUgdXQsIGFzc3VtZW5kYSBuZXNj aXVudCBwcmFlc2VudGl1bSBoaWMgdGVtcG9yYSBkb2xvcmVtIGltcGVkaXQuIFF1aXMgYXNzdW1l bmRhIGFtZXQgcXVpYnVzZGFtIHF1YW0gcHJvdmlkZW50LCBxdW9zIHNpbnQgZG9sb3JlcyBpbXBl ZGl0LiBFdW0sIGlwc3VtLgoJPC9wPgo8L2JvZHk+CjwvaHRtbD4=