HTML5 embedded SVG - height/width: auto

Hello!

I have a question about what the expected behavior of the outer SVG when the CSS height/width property is set to "auto". I see three possible scenarios (in the order of what I think it is the preferred solution):
1. The computed value respects the CSS2.1 specification for replaced elements: http://www.w3.org/TR/CSS21/visudet.html#the-height-property ; this could lead to a value of 150px; the outer SVG elements should act as block replaced elements
2. The computed value is the one assigned to the width/height attribute, considered an intrinsic dimension for the SVG block element; 100% if not specified, as the SVG spec states
3. The computed value is 0; the SVG container does not act as a replaced element

For example, consider the following document:

<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div style="border:1px solid green;width:300px;height:450px;">
<p>Before SVG</p>
<svg xmlns="http://www.w3.org/2000/svg" style="height: auto; width:100%; display:block;" viewBox="0 0 100 200">
<rect width="100" height="100" fill="red"/>
</svg>
<p>After SVG</p>
</div>
</body>
</html>

Here are the computed width and height for the SVG element in some of the popular rendering engines:
- Webkit doesn't render anything and reports a height of 0.
- 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. However, from my understanding, the viewBox attribute should be used only to map one coordinate system to another, not to set the viewport.

How do you think an implementation should handle this ambiguity?

Thanks,
Andrei

Received on Monday, 17 January 2011 14:23:19 UTC