Нравятся мне такие вещи. Алексей Тен из Яндекса придумал очень изящный способ внедрения СВГ в код с возвратом к растровому формату, если браузер не поддерживает СВГ:

<svg width="96" height="96">
    <image xlink:href="svg.svg" src="svg.png" width="96" height="96"/>
</svg>

Принцип виден из кода, я думаю, но я всё же расшифрую. Если браузеры поддерживают внедрение СВГ в ХТМЛ, то почти весь выше приведённый код будет для них значимым: кроме атрибута «src», его у тега СВГешного image не бывает и он будет отброшен. Соответственно, картинка загрузится из файла svg.svg.

Если же браузер СВГ в таком виде не понимает, то будет отброшен тег svg и атрибут «xlink:href», а тег image будет преобразован в img — это старая особенность браузеров, которой я тщетно пытался придумать применение. В этом случае будет загружен svg.png.

Я уже на сайте в одном месте использую этот трюк.

Как и ожидалось, Ретина ещё какое-то время будет порождать баги. Наткнулся на необычное поведение «Сафари» (в свежем «Хроме» баг не повторился) — один из шрифтов смотрелся размытым (на скриншоте слева). Оказалось во всём виноват фильтр -webkit-filter: opacity, наложенный для анимированного появления окна.

Заменили на обычное свойство opacity, стало выглядеть, как на скриншоте справа.