Re: HTML5 embedded SVG - height/width: auto

On 1/17/11 8:32 AM, Andrei Bucur wrote:
> I have a question about what the expected behavior of the outer SVG when
> the CSS height/width property is set to "auto".

SVG 1.1 isn't really very clear on this.  It's worth reading 
https://wiki.mozilla.org/SVG:Sizing to see where some of the discussion 
was a few years ago.

I believe what Gecko tries to implement nowadays is basically what SVG 
Tiny 1.2 says (and I believe there are plans to update SVG Full 1.1 
accordingly).

> 1. The computed value respects the CSS2.1 specification for replaced
> elements: http://www.w3.org/TR/CSS21/visudet.html#the-height-property
> <http://www.w3.org/TR/CSS21/visudet.html#the-height-property>

This is what Gecko implements.

> this could lead to a value of 150px

Or something else, depending on the SVG in question.  See below.

> <svg xmlns="http://www.w3.org/2000/svg" style="height: auto; width:100%;
> display:block;" viewBox="0 0 100 200">

> - Firefox and Opera report a width of 300px and a height of 600px. My
> guess is that they are using the container width / viewBox width ratio
> and multiply it with viewBox height to determine the content height.

Not quite.  They're using the viewbox to determine the intrinsic ratio 
of the SVG content, then setting its width to 300px based on the width 
style, then setting its height so as to preserve the aspect ratio.

See http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height and 
in particular this paragraph:

   Otherwise, if 'height' has a computed value of 'auto', and the
   element has an intrinsic ratio then the used value of 'height' is:

     (used width) / (intrinsic ratio)

> However, from my understanding, the viewBox attribute should be used
> only to map one coordinate system to another, not to set the viewport.

Please see http://www.w3.org/TR/SVGTiny12/coords.html#IntrinsicSizing

-Boris

Received on Monday, 17 January 2011 15:26:39 UTC