405116 - SVG has a little extra padding at its bottom edge

Status: RESOLVED DUPLICATE of bug 22274

(Core :: SVG, defect)

Description

[Jonathan Watt [:jwatt]]

For some reason <svg> in HTML seems to get a little extra padding added to its bottom edge. This causes the lines of circles in the test http://www.w3.org/2004/CDF/TestSuite/WICD_CDR_WP1/test-scalable-child-size-calculation.xhtml to be separated slightly.

I'm assuming the extra space added to the bottom edge is due to SVG being |display:inline| by default, and therefore this space is space added for descenders. I'm wondering if this is necessary though, or if there's some CSS property that could specify the descender to be zero.

Comment 1

[Jonathan Watt [:jwatt]]

Attachment: testcase - there should not be a vertical scrollbar

Comment 2

[Boris Zbarsky [:bzbarsky]]

Yeah, see bug 22274.  Bug 22274 comment 37 has ways to change the behavior.

Comment 3

[Jonathan Watt [:jwatt]]

To repeat the options that dbaron mentions there, the problem can be solved by either:

 * triggering compatibility mode
 * using 'display: block' on the SVG (works in many situations, but not all, and logically preferred)
 * using 'vertical-align: bottom' on the images

For the CDF testcase we're in XHTML so compatibility mode isn't an option, and 'display:block' is not appropriate since we want three of the SVGs on a line at the same time. Happily the 'vertical-align: bottom' options works perfectly.

Thanks a lot Boris. I guess this bug is invalid, but I'll dupe it to bug 22274.