Bug 34521 - Apply preserveAspectRatio and synthesize viewboxes in <img>
Summary: Apply preserveAspectRatio and synthesize viewboxes in <img>
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: Nikolas Zimmermann
Depends on: 47156 62007
  Show dependency treegraph
Reported: 2010-02-03 05:06 PST by Leif Arne Storset
Modified: 2011-11-01 06:28 PDT (History)
4 users (show)

See Also:

Test case (2.33 KB, text/html)
2010-02-03 05:06 PST, Leif Arne Storset
no flags Details
Images for test case (10.91 KB, application/zip)
2010-02-03 05:07 PST, Leif Arne Storset
no flags Details
Chrome rendering (47.24 KB, image/png)
2010-02-03 05:07 PST, Leif Arne Storset
no flags Details
Opera rendering (33.76 KB, image/png)
2010-02-03 05:07 PST, Leif Arne Storset
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Leif Arne Storset 2010-02-03 05:06:02 PST
Created attachment 48014 [details]
Test case

(First mentioned on webkit-dev [3])

As far as I can tell from the latest nightly builds (and the latest Chrome
release on Linux), WebKit will render an SVG in <img> much like a bitmap:
it will resolve the width and height of the image and stretch it to fill
the content box. It will respect any viewbox (presumably synthesizing one
if it is missing), but preserveAspectRatio [1] seems not to be applied to
an SVG in <img>, and the default rendering (whether there is a viewbox or
not) is as if preserveAspectRatio="none".

Opera (Presto engine) will also resolve image dimensions and synthesize
missing viewboxes, and will synthesize a viewBox if it can, as outlined
in SVG WG ISSUE-2258 [2], and applies preserveAspectRatio as specified in
SVG 1.1 (note that pAR has a default value 'xMidYMid meet'). The viewBox
(whether specified or synthetic) are used together with pAR when rendering
the SVG into the viewport established by the <img> element.

The attached images and test case illustrate the two renderings.

We believe that not applying the pAR on svg in <img> means that WebKit
has invalid rendering behaviour according to the SVG 1.1 specification.

To enhance cross-browser compatibility it would be good if WebKit also
considered synthesizing viewBoxes as outlined in [2], as this makes it
easier to reuse existing svg content created by svg editors such as
Inkscape (such content most often has a width and height, but lacks a

[1] http://www.w3.org/TR/SVG11/coords.html#PreserveAspectRatioAttribute
[2] http://www.w3.org/Graphics/SVG/WG/track/issues/2258
[3] https://lists.webkit.org/pipermail/webkit-dev/2010-February/011514.html
Comment 1 Leif Arne Storset 2010-02-03 05:07:02 PST
Created attachment 48015 [details]
Images for test case
Comment 2 Leif Arne Storset 2010-02-03 05:07:22 PST
Created attachment 48016 [details]
Chrome rendering
Comment 3 Leif Arne Storset 2010-02-03 05:07:38 PST
Created attachment 48017 [details]
Opera rendering
Comment 4 Nikolas Zimmermann 2011-06-03 02:18:04 PDT
I'm working on this, now that <object>/<embed>/<iframe> intrinsic sizing has been properly implemented.
Comment 5 Nikolas Zimmermann 2011-06-22 01:09:00 PDT
I can reproduce Operas rendering now, finally :-)
Also works with zooming, etc - as expected.

I still need to fix some related bugs (16167) before I'll upload the patch.
Comment 6 Nikolas Zimmermann 2011-07-23 05:01:30 PDT
47156 fixes this.
Comment 7 Gavin Kistner 2011-09-28 10:35:12 PDT
Here is a hosted test case:

The two <img> tag in this file are fixed size (one using width/height attributes, the other using width/height style) and reference this SVG file:
which has 100% height and width.

In Safari and Chrome, resizing the browser window causes the aspect ratio of the SVG displayed in the SVG tags to change. In Firefox the images appear unchanging, as intended.
Comment 8 Nikolas Zimmermann 2011-09-28 11:15:13 PDT
Thanks for the additional testcases. Unfortunately the fix did not land yet, I'll update the bug once it happens.
Comment 9 Nikolas Zimmermann 2011-10-31 08:28:22 PDT
Fixed in r98852. Thanks for the testcase!
This one http://phrogz.net/SVG/svg-via-img.html is fixed as well.
Comment 10 Leif Arne Storset 2011-11-01 06:28:24 PDT
Nice! Thanks for contributing to compat and compliance.