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

[Vlad Alexander (xhtml.com)]

Thank you Erik - this is what I was looking for.

Regards,
-Vlad
http://xhtml.com




-------- Original Message --------
From: Erik Dahlström
Date: 2008-01-28 11:16 AM
> On Mon, 28 Jan 2008 15:34:32 +0100, Vlad Alexander (xhtml.com) 
> <vlad.alexander at xhtml.com> wrote:
> 
>> 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?
> 
> The dimensions of the visual content of the element in CSS pixels, or 
> the "viewport" in SVG terms.
> 
>  From HTML5 [1]:
> The specified dimensions given may differ from the dimensions specified 
> in the resource itself, since the resource may have a resolution that 
> differs from the CSS pixel resolution. (On screens, CSS pixels have a 
> resolution of 96ppi, but in general the CSS pixel resolution depends on 
> the reading distance.) If both attributes are specified, then the ratio 
> of the specified width to the specified height must be the same as the 
> ratio of the logical width to the logical height in the resource. The 
> two attributes must be omitted if the resource in question does not have 
> both a logical width and a logical height.
> 
>> 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?
> 
> Yes, just like a raster image it must specify its dimensions (or 
> intrinsic ratio) to produce a particular streching behavior. Nothing 
> strange about that IMHO.
> 
> There are at least two ways of doing that:
> a) having a 'viewBox' attribute on the svg root element
> b) having both 'width' and 'height' attributes (in any unit that is not 
> a percentage) on the svg root element
> 
> For both of the above, if a particular scaling behavior is wanted then a 
> 'preserveAspectRatio' attribute [2] should be added as well.
> 
> The reason for percentages being excluded in b) should be obvious, since 
> the svg coordinate system will then depend on arbitrary external 
> dimensions to establish its coordinate system (practical consequence 
> being that svg content may or may not be clipped).
> 
>> Can you please provide an example of how to modify the tiger.svg image 
>> so that it will work in my 3 test cases?
> 
> Applying option b), which will give you a scaled version:
> 
> <svg xmlns="http://www.w3.org/2000/svg"
>      xmlns:xlink="http://www.w3.org/1999/xlink"
>      height="800" width="600">
> ...
> 
> Or option a), with non-uniform scaling:
> 
> <svg xmlns="http://www.w3.org/2000/svg"
>      xmlns:xlink="http://www.w3.org/1999/xlink"
>      viewBox="0 0 600 800" preserveAspectRatio="none">
> ...
> 
> Or option b), with non-uniform scaling:
> 
> <svg xmlns="http://www.w3.org/2000/svg"
>      xmlns:xlink="http://www.w3.org/1999/xlink"
>      height="800" width="600" preserveAspectRatio="none">
> ...
> 
> Technically only variant a) is correct according to the specs at the 
> moment, so I would advise you to use that.
> 
> Cheers
> /Erik
> 
> [1] http://www.w3.org/TR/html5/#width3
> [2] http://www.w3.org/TR/SVG11/coords.html#ViewBoxAttribute
>