How to properly maintain an SVG file for use as background image in IE9?

Question

I am trying to use SVG background to replace CSS3 gradient in IE9 (which does not support CSS3 gradient). I tested it locally and it works like a dream . However, when I upload these changes to the site, it does not work. I checked that the SVG file is on the server in its untouched form.

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

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

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

One thing I noticed is that when I look at the headers of this asset in Fiddler, it says "Transport - Connection: close". Does this 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 on a div background.

Try the following:

• Press F12 to open Developer Tools

• " " " " ? " IE9", ?

  

• "" , " ", " ". /css/record-box-gradient.svg URL-? 200, 304?