[webkit-dev] Support for SVG preserveAspectRatio in <img>

[Leif Arne Storset]

Hello,

While doing some SVG-related work over here I discovered that WebKit's
rendering of SVG in <img> tags differs from Opera's. Since WebKit and
Opera to my knowledge are the only engines that currently support SVG in
<img> we thought it would be worthwhile to make sure we are compatible.

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.

A quick Google search of webkit.org revealed little on preserveAspectRatio
except a reference to a 2008 bug in SVGImageElement. However, for
<svg:image> (that is: <image> elements inside of an <svg>), pAR seems to
be applied as per the spec.

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
viewBox).

I hope you find these recommendations useful. Please let me know if I can
be of further assistance. If desired I can file a bug in your issue
tracker.

-- 
Leif Arne Storset
Layout developer, Opera Software

[1] http://www.w3.org/TR/SVG11/coords.html#PreserveAspectRatioAttribute
[2] http://www.w3.org/Graphics/SVG/WG/track/issues/2258
-------------- next part --------------
A non-text attachment was scrubbed...
Name: img.zip
Type: application/zip
Size: 11167 bytes
Desc: not available
URL: <http://lists.webkit.org/pipermail/webkit-dev/attachments/20100202/c7fb6c25/attachment.zip>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: chrome-pAR.png
Type: image/png
Size: 48374 bytes
Desc: not available
URL: <http://lists.webkit.org/pipermail/webkit-dev/attachments/20100202/c7fb6c25/attachment.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: opera-pAR.png
Type: image/png
Size: 34570 bytes
Desc: not available
URL: <http://lists.webkit.org/pipermail/webkit-dev/attachments/20100202/c7fb6c25/attachment-0001.png>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-dev/attachments/20100202/c7fb6c25/attachment.html>