How do you properly serve an SVG file for use as a background image in IE9?

Question

I'm trying to use an SVG background to take the place of a CSS3 gradient in IE9 (which doesn't support CSS3 gradient). I've tested it locally and it works like a dream. However, when I upload these changes to the live site, it doesn't work. I've verified that the SVG file IS up on the server in its intact form.

Here's the file: http://www.shmax.com/css/record-box-gradient.svg

And here's a simple test page, where it's used as the background of a div: http://www.shmax.com/gradient.html?DBGSESSID=-1

View the page in both Chrome and IE9, and you'll notice that it appears in Chrome, but not in IE9. Oddly, it DOES work in IE9 when I view it on my local test machine.

One thing I've noticed is that when I view the headers for this asset in Fiddler, it says "Transport - Connection: close". Does that mean anything? Is this something I need to fix in my .htaccess?

Thanks for the help, guys.

Answer 1

Your simple test page works for me in IE9; I see a gradient in the background of the div.

Try this:

1. Press F12 to open the Developer Tools

2. What is the "Document Mode" in the 'menu bar' of the tools? If you set it to "IE9 Standards", do you see the gradient?

   

3. Click on the Network tab for the developer tools, click on "Start Capturing", reload your test page, and then click on "Stop Capturing". Do you see a request for /css/record-box-gradient.svg in the the URLs? Is it either status 200 or 304?