Можете ли вы заставить изображения SVG отображаться в качестве фона ... даже в Internet Explorer?

Question

Я использую изображения SVG в качестве фоновых изображений. Мой CSS выглядит так:

background:url('image.svg');

Проблема в том, что они не отображаются в IE8 или более ранней версии.

Есть ли способ заставить эту работу? Или, возможно, указать запасной вариант только для IE? (Я не хочу заменять их гифками для других браузеров.)

Живой пример: ЗДЕСЬ

Answer 1

У меня была такая же проблема и я использовал это решение .Чтобы это работало, вам необходимо иметь svg и png копию изображения .Чем писать CSS следующим образом:

.twitter-logo {
  width: 200px;
  height: 200px;
  background: url(http://cl.ly/D4xT/twitter_newbird_blue.png) no-repeat center center;
  background: rgba(0,0,0,0) url(http://cl.ly/D4o5/twitter_newbird_blue.svg) no-repeat center center;
}

Хитрость в том, что IE8 не поддерживает rgba , и из-за этого IE8 игнорирует второе определение фона .

Согласно поддержке svg в других браузерах , у вас по-прежнему будут проблемы с Браузером Android 2.3- и Firefox 3.6 , посколькуони поддерживают rgba и не поддерживают svg.

Вот пример jsfiddle .

Answer 2

Я не знаю, как заставить IE8 использовать SVG в качестве фонового изображения.У вас есть два реальных варианта, если поддержка IE8 важна для вас:

1. Предоставить PNG-резерв для IE8 и других браузеров, которые не поддерживают SVG в фоновом режиме
2. Поместите SVG на страницу вместо фона, поместите его позади всего остального с помощью CSS, затем используйте что-то вроде SVG Web , чтобы обеспечить поддержку в IE8