SVG external stylesheet fails to load in MSIE and Adobe SVG Plug-in

I recently because aware of a problem in CHADIS where our SVG images weren’t styling correctly in print previews: everything was black-and-white, except for a particular image that seemed fine. This was observed in MSIE 8 with the Adobe SVG plug-in, and also in Microsoft’s new MSIE 9 platform preview. Actually printing the image had the same problem as the print preview: no color.

The difference appeared to be that the working image had a completely in-line set of styles, while the broken images were referencing an external stylesheet. We confirmed that moving all the styles into the main image resolved the problem. That defeats the whole purpose of having an external stylesheet: sharing. At least we had a workable solution that we could implement if absolutely necessary.

I checked-out Adobe’s FAQ, and they claim to support external CSS files for SVG files. Weird. I looked at the files, again, and noticed that we were using a stylesheet that didn’t have a fully-qualified URL: it was a relative one:

<?xml-stylesheet href="/path/to/stylesheet.css" ?>

On a whim, I hard-coded a hostname into the stylesheet’s URL and, lo and behold, the stylesheet was loaded. This trick works on both the MSIE 9 preview as well as MSIE 8 with the Adobe SVG plug-in.

It’s unclear to me whether this is an MSIE problem (that the base URL isn’t properly set during printing) or an Adobe problem. Given that it occurs in both MSIE 8 with the Adobe plug-in, and MSIE 9 without the plug-in, I suspect it might be a fault in MSIE in general. In either case, only MSIE requires the Adobe plug-in these days, anyway, so it doesn’t matter whose fault it is. The solution, however, is to fully-qualify the URL for the stylesheet:

<?xml-stylesheet href="http://host/path/to/stylesheet.css" ?>

Once that’s been done, everything works, again.

%d bloggers like this: