Превращение SVG-изображения в png для неподдерживаемых браузеров - Fallback - modernizer.js(?)

Question

Я смотрю на поворот нескольких SVG изображения у меня на сайте в PNG для браузеров, которые не поддерживают SVG должным образом. У меня в основном проблемы с отображением текстовых IE (отображается совершенно неверный шрифт), поэтому я решил создать запасной вариант для PNG,

Я попытался найти хорошее прохождение для этого (я сам признался, нуб), и мне пока не удалось заставить все это работать. Я считаю, что я хочу использовать http://modernizr.com/ для проверки совместимости, а затем использовать несовместимые изображения (?)

Answer 1

Крис Койер отвечает на этот точный вопрос в последнем вопросе CSS Smashing Magazine.

1. Загрузите версию Modernizr, которая урезана до простого тестирования SVG (при условии, что это единственный тест, который вам нужен).
2. Запустите тест. Если это пройдет, положить в SVG. Если это не удается, вставьте растровое изображение. По существу:

Пример (решение JS):

if (!Modernizr.svg) {
    $("#logo").css("background-image", "url(fallback.png)");
}

Пример (решение CSS):

.no-svg #logo { background-image: url(fallback.png); }

Это должно быть необходимо только для IE8 и ниже. Могу ли я использовать имеет полную таблицу поддержки браузера.

Спасибо Крис!