Why does Firefox appear to truncate embedded SVGs?

Question

Take this snippet of SVG embedded directly into the body of an XHTML served with DTD XHTML 1.0 Strict

<svg>
    <circle cx="150" cy="150" r="150"/>
</svg>

View this example at http://jsfiddle.net/3NXbL using Chrome (I'm using 11.0.696.57) A whole circle is seen.

View the same jsfiddle using Firefox (I'm using 4.0.1). The same circle is seen, but cut in half on the vertical.

(Note I have seen the exact same behavior on other versions of Firefox, different doc types and different methods of including SVG content, but this is cut down to a very simple example for jsfiddle)

What are Firefox's rules for allocating dimensions to SVG content in web pages? Are there any easy ways to bring them into line with other browsers? How would you modify my jsfiddle example to see the whole circle?

Answer 1

1) Outermost <svg> defaults to overflow:hidden per SVG spec.

2) The size of the outermost <svg> is determined like that of any other CSS replaced element per http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width and http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height and for your case (no intrinsic height, width and height specified as 100% but containing block presumably has auto height) that gives a height of 150px.

Chrone seems to just be buggy here: it's using the viewport instead of the actual containing block as the percentage base for the <svg> height.

Answer 2

You should specify a width and height on the <svg> element. Firefox defaults to an arbitrary height when this is omitted, which causes the clipped viewport.