Здравствуйте, дорогие читатели. Те из вас, кто когда-либо работал с форматом svg, знают о противном и, что самое главное, чрезвычайно старом баге, проявляющемся в webkit-браузерах. Суть бага в том, что если вставить svg-картинку с прозрачным фоном через тег object, то safari и хром зальют её белым цветом — пример.

Первое решение, которое я встречал в интернете, заключалось в определении браузера через джаваскрипт, и в замене тега object на тег img для webkit-браузеров, так как при вставке svg через img прозрачный бэкграунд отображается правильно. Второе решение сводилось к использованию inline-svg, но для этого сама страница должна быть корректным xhtml-докуметом, что очень не по нраву IE.
Совершенно случайно было найдено третье решение. Настолько элементарное, что удивительно, что никто этого ещё не попробовал (если в этом я ошибаюсь, пожалуйста сообщите мне). Достаточно в svg-файле после тега <svg> написать следующие строки:
  1. <style>
  2.     svg { -webkit-background-clip: text; }
  3. </style>
* This source code was highlighted with Source Code Highlighter.

И тут же свершается магия. Вот ссылка на рабочий пример. Спасибо, на этом всё.

Upd.


Оказалось, что в хроме, начиная по крайней мере с 8-ой версии, баг уже починен. Для сафари всё ещё актуально. Кто-нибудь проверьте в седьмом хроме пожалуйста.