up vote 3 down vote favorite
share [g+] share [fb]

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.

link|improve this question
100% accept rate
Works for me on Firefox 3.6.18, Linux. – Mechanical snail Aug 18 '11 at 19:40
It doesn't work in later versions of Firefox, though. – kzh Aug 20 '11 at 21:19
feedback

2 Answers

up vote 2 down vote accepted

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.

link|improve this answer
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:kaleb.hornsby.ws/+/img/RI.svg Thanks. – kzh Aug 21 '11 at 12:00
feedback
up vote 1 down vote

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.

link|improve this answer
feedback

Your Answer

 
or
required, but never shown
discard

Not the answer you're looking for? Browse other questions tagged or ask your own question.