Take the 2-minute tour ×
Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

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.

share|improve this question
    
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

2 Answers 2

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.

share|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

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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