Отличная статья Ильи Пухальского:

Если вы ещё не знакомы с техникой отзывчивых иконок Джо Харрисона, то, скорее всего, будете впечатлены так же сильно, как и я, когда впервые открыл её для себя. В этой статье я бы хотел исследовать, что мы можем делать с SVG, кроме традиционной практики замены PNG. В частности, мы можем рассматривать SVG как независимый модуль, который включает в себя CSS для кастомизации вариантов отображения; также как и правила для отзывчивого поведения, SVG может содержать в себе JavaScript для логики взаимодействий. Теперь давайте рассмотрим эту технику детальнее.

Сейчас повсеместно ставят всякие Retina и другие экраны с большой плотностью пикселей. Обычные картинки смотрятся архаично. Можно конечно ставить изображения увеличенные в два раза, а можно просто ипользовать векторные картинки формата SVG. Но, несмотря на 2014 год, иногда все еще можно встретить компьютеры, в которых утсановленны браузеры, неподдерживающие эту технологию. По этой причине многие ищут способы использования SVG, но чтобы IE тоже мог что-то показать вместо белого квадратика.

На самом деле все легко. Если SVG используется в качестве фонового изображения, то можно делать вот так:

.block-with-svg {
    background-image: url(/path/to/image.png);
    background-image: url(/path/to/image.svg), none;
}

А если вы просто вставили картинку, то:

<img src="/path/to/image.svg" onerror="this.src='/path/to/image.png'" />

Работает везде.