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

Dean Jackson dino at apple.com
Tue Feb 2 10:39:24 PST 2010

Hi Leif,

Yes, this is a bug. Please file it, thanks!


On 02/02/2010, at 8:17 AM, Leif Arne Storset wrote:

> 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<img.zip><chrome-pAR.png><opera-pAR.png><preserveAspectRatio.html>_______________________________________________
> webkit-dev mailing list
> webkit-dev at lists.webkit.org
> http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev

More information about the webkit-dev mailing list