630404 - SVG graphic doesn't display properly on Canvas Pinball HTML5 demo

Status: RESOLVED DUPLICATE of bug 614649

(Core :: SVG, defect)

Description

[Brian Carpenter [:geeknik]]

User-Agent:       Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0b11pre) Gecko/20110131 Firefox/4.0b11pre
Build Identifier: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0b11pre) Gecko/20110131 Firefox/4.0b11pre

The arrow keys SVG graphic on the Canvas Pinball HTML5 demo don't display properly with Minefield. 

Not displayed correctly in Minefield:
http://i.imgur.com/Ea9xf.png

Displayed correctly in Chrome:
http://i.imgur.com/vRTlb.png

Code responsible:
<p>To play, use the arrow keys <span class="GiantFont">(<span id="arrowKeys"><img width="75" height="56" src="assets/aarowkeys.svg"></span>)</span>. Left and right operate the flippers, and the down arrow key operates the launcher.</p>

Reproducible: Always

Comment 1

[Daniel Holbert [:dholbert]]

(In reply to comment #0)
> <img width="75" height="56"
> src="assets/aarowkeys.svg">

From the SVG:
 <svg width="100" height="75" xmlns="http://www.w3.org/2000/svg">

This is an instance of bug 614649 (i.e. NOTABUG, but an difference in behavior between us & chrome/opera).

In short: the <svg> node needs to add viewBox="0 0 100 75" to tell the browser (a) that it wants a region scaled to fit a viewport and (b) what that region is.

Absent a viewBox, we just present the (cropped-to-75px-by-56px) upper-right corner of SVG-space, at 100% zoomlevel.  See the other bug for more.

Comment 2

[Daniel Holbert [:dholbert]]

(In reply to comment #1)
> From the SVG:
>  <svg width="100" height="75" xmlns="http://www.w3.org/2000/svg">

For the record, the "aarowkeys.svg" used in this demo has now changed (on Microsoft's web site) to:
> <svg width="100" height="75" viewBox="0 0 100 75" xmlns="http://www.w3.org/2000/svg">
so this demo should now work in older Firefox 4 beta versions and nightlies, from before bug 614649 was fixed.

Per today's messages to www-svg[1], IE9 RC apparently changed (with respect to their beta) to match the behavior that mozilla-central had up until a few days ago (until bug 614649 landed):
http://lists.w3.org/Archives/Public/www-svg/2011Feb/0046.html

Comment 3

[Daniel Holbert [:dholbert]]

(for reference, aarowkeys.svg is located at
http://ie.microsoft.com/testdrive/Graphics/CanvasPinball/assets/aarowkeys.svg
)