SVG Not Displaying Completely – Fix Issues in Chrome and Firefox

firefoxgoogle-chromesvg

Why is this SVG image not displaying properly in Chrome or Firefox? It displays as expected in IE 9. I tested this in Firefox 5 and 6 and Chrome 13, 14, and 15–all on Windows. I'll test Linux and ChromeOS when I get home.

http://upload.wikimedia.org/wikipedia/commons/1/14/Map_of_Rhode_Island_highlighting_Bristol_County.svg

The image is supposed to look like:

enter image description here

I am only seeing the red county, and nothing else. It may have something to do with the viewport:

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1"
     width="6416.0" height="9720.0"
     viewBox="-1856,-3363 6416,9720">...

As a note, I get this behavior for all county map SVG images on Wikipedia, but not necessarily other SVG images on Wikipedia.

Best Answer

Not sure what changed, but Chromium 14 & Opera 11.50 agree with current Firefox rendering (giant canvas, showing just the red country), so I'm guessing the new behavior is "correct" given the markup.

edit: Ok, I've traced this back to the nightly changeset-range on Firefox development trunk. The behavior-change was due to the top change there, for bug 547062, and the new behavior appears to be correct & as intended. See the first comment on that bug -- <clipPath> is restricted to only contain certain elements, and <g> is not included in that list. So the testcase has invalid markup.

Mechanical snail's linked validator agrees with the above -- it says: document type does not allow element "g" here.

Related Question