CODEWITHSUNDEEP
csssvginternet-explorer-9
Angelo.Hannes
Angelo.Hannes

Reputation: 1729

SVG background image in IE9

I have a strange problem with svg images as background in Internet Explorer 9.

I tested following css rules:

background-image: url(./grad.svg);  /* local file */
background-image: url(http://127.0.0.1:7101/path/to/images/grad.png);
background-image: url(http://127.0.0.1:7101/path/to/images/grad.svg);

while the first two rules work great, the last one fails. With the F12 Developer Tools it shows (Pending...) for the svg image. Accessing the images directly with their url, they are shown correctly in IE9.

I checked all three rules in Opera and they worked.

So what is wrong with the last rule?

//edit

additionally I tested following rule:

background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc1MjQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0ZGRkZGRiIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0UzQTgyMCIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzUyNCkiIC8+Cjwvc3ZnPg==);

worked fine both in IE9 and Opera

//edit 2

I also did try the following:

background-image: url(http://upload.wikimedia.org/wikipedia/commons/a/af/Android-System-Architecture.svg);

it worked!?

Upvotes: 2

Views: 5070

Answers (1)

Erik Dahlström
Erik Dahlström

Reputation: 60966

Make sure that your local webserver sends the correct mediatype for svg files, image/svg+xml.

Upvotes: 3

Related Questions