SVG Not Displaying Completely in Chrome/Firefox

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.

kzh

Posted 2011-08-18T17:06:31.747

Reputation: 3 213

Works for me on Firefox 3.6.18, Linux. – Mechanical snail – 2011-08-18T19:40:52.300

It doesn't work in later versions of Firefox, though. – kzh – 2011-08-20T21:19:03.953

Answers

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.

dholbert

Posted 2011-08-18T17:06:31.747

Reputation: 181

I successfully rendered and validated it by removing the clippath element surrounding the g elements and also by changing id attributes that began with numbers. view-source:http://kaleb.hornsby.ws/+/img/RI.svg Thanks.

– kzh – 2011-08-21T12:00:10.937

As dholbert states, other recent web browsers agree with the new Firefox rendering.

The W3C's markup validator shows the svg file as invalid, which is probably why.

Mechanical snail

Posted 2011-08-18T17:06:31.747

Reputation: 6 625