[whatwg] Opera SVG Re: How to use SVG in HTML5?

Vlad Alexander (xhtml.com) vlad.alexander at xhtml.com
Mon Jan 28 06:34:32 PST 2008

Hi Erik,

Thanks Erik, but I still don't get it. Can you please help me better understand the following:

1. What do the IMG element's width and height attributes establish?

2. In order to reproduce the same stretching behaviour using IMG element and SVG that exists between the IMG element and a raster image, the SVG must be written in a specific way? Can you please provide an example of how to modify the tiger.svg image so that it will work in my 3 test cases?


-------- Original Message --------
From: Erik Dahlström
Date: 2008-01-28 5:56 AM
> Hi Vlad,
> On Mon, 28 Jan 2008 08:41:57 +0100, Charles McCathieNevile 
> <chaals at opera.com> wrote:
>> Hi Vlad,
>> as I read these, Opera is doing the right thing. Since the SVG you use 
>> doesn't have a viewBox attribte to say how the thing should fit, it 
>> creates an "initial viewport" where the size in px that the image 
>> element gets corresponds to a view in SVG user units. So a 300x100 img 
>> shows a portion of the SVG that goes from 0,0 (the top left) to 
>> 300,100 at the bottom right - in other words, only a part of the tiger.
>> If you add a viewBox then the preserveAspectRatio attribute can be 
>> used, and has the default value of none, which squeezes the SVG to fit 
>> the space you give it.
> To clarify: preserveAspectRatio has a default value of 'xMidYMid meet', 
> not 'none'. If non-uniform scaling is wanted one must specify 
> preserveAspectRatio="none".
>> Without viewBox the preserveAspectRatio has no effect, since there is 
>> nothing that says how what size the contents of the SVG should be.
>> So I don't think there is a bug at all. If you use something like 
>> inscape that doesn't add a viewBox, your SVG will do what your demos 
>> do. We can in fact change that in Opera for example by adding a 
>> default viewBox of some kind, but technically that is in violation of 
>> the current specs for SVG up to and including 1.2.
>> I've cc'ed Erik, our SVG lead and the hair of the SVG WG, in case he 
>> wants to offer anything more, or correct anything I have misunderstood.
>> cheers
>> Chaals
>> On Sat, 26 Jan 2008 00:10:08 +1100, Vlad Alexander (xhtml.com) 
>> <vlad.alexander at xhtml.com> wrote:
>>> Hi Charles,
>>> Thanks for looking into this. Here you go:
>>> http://xhtml.com/misc/svg-img1.htm
>>> http://xhtml.com/misc/svg-img2.htm
>>> http://xhtml.com/misc/svg-img3.htm
> The referenced svg file doesn't define an intrinsic ratio, since 
> width="100%" (default value) and height="800". It wouldn't make sense to 
> synthesize a viewBox in this case since the resolved width can be 
> anything, so any scaling you try to apply can mean that parts of the 
> image are outside the viewport bounds.
> Cheers
> /Erik

More information about the whatwg mailing list