external loaded SVG broken in IE (Raphael JS)

Question

Hi everyone,

I am using jQuery to load an external SVG (a map of France) and parse it into paths with raphaël.js the following code. But it is not doing anything in IE. Any ideas?

$(document).ready(function(){
    var paper = Raphael("canvas", 450, 380);
    var map = paper.set();

    // load svgz map
    $.ajax({
        type: "GET",
        url: "map-smllr.svgz",
        dataType: "xml",
        success: parseXml
    });

    // ... removed a few other variables

    function parseXml(xml) {
        var count = 0;
        $(xml).find("g").children("path").each(function()
        {
            var deptNr = depts[count];
            var path = $(this).attr("d");
            var c = paper.path(path);
            c.attr(attr).attr("title",deptNr);
            map.push(c);
            count++;
        });
        //startMap();
    }
});

You can view a full source here: http://ngjulie.com/map/raphael.html

I have a funky caching issue in Chrome too, where a blank spot is shown until the user hovers over the canvas.

But the biggest problem is that this is not working in IE. The general examples on the RaphaelJS website work fine. So it must be something in my code.

Any ideas?

Cheers, Julie

Answer 1

Hi,

It seems not to be working because the svgz and svg images are being served with an image/svg+xml mimetype, which is causing the IE XML parser to fail (if set an error condition in the $.ajax call, you'll see this happening - this good practice anyways). Likewise, if you navigate to http://ngjulie.com/map/map-smllr.svgz or http://ngjulie.com/map/map-smllr.svg in IE, you'll see it attempts to download the file, rather than parsing it with the IE XML parser component.

I think if you serve the files with a text/xml or application/xml mimetype it should probably work. I tested this quickly by renaming map-smllr.svgz to map-smllr.xml, thus making it easy for my web server to serve the file with the correct mimetype. If you navigate to that file in IE8, you'll see that it gets parsed as XML. Likewise, the XHR GET succeeds, and is able to parse the file. Everything else then works as expected.