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.


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"
     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.

  • 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

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.

  • 1
    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

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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