css background-image svg+картинка
 

хочу для background-image использовать svg .
в svg внешняя картинка . "data url" использовать не могу, так как картинка очень большая.

проблема c FF, картинка не отображается
есть ли решения ?

А чего ты боишься? оверхеда? gzip нивелирует оверхед. Так что втыкай через data:uri раз подругому не работает. А вставить несколько background-изображения не получится? Отдельно svg и отдельно твою большую картинку.

ff20, всё норм отображается, хз.

Aetae, а где там «в svg внешняя картинка» ?

Эм, внешняя - с другого домена? Какбэ если dataURL не может использовать по идеологическим причинам, а не по техническим то картинка имеется ввиду именно своя. Или я чего-то не понял?

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

может через css можно рулить адресом картинки в svg ?

идея использовать svg получилось тупиковой.
сделал через data:url . но подвел Chrome
по какой-то непонятной логике не отображает картинку. а если сперва открыть svg а потом в этойже вкладке страничку то волшебным образом работает.

http://vflash.ru/bug/bgsvg.html

IE6-2.0

Подтверждаю глюк. А другие варианты не подходят? Вебкит поддерживает css-маски например.

Кажется вот этот глюк: https://bugs.webkit.org/show_bug.cgi?id=99677

для ФФ и Хрома так и поступил. жаль для ФФ нет "mask-position", пришлось имитировать.

отказался от масок, в ФФ они ощутимо притормаживают.
для Хрома нашел хак , чтоб заставить его грузить картинку.

в <image <image xlink:href="http://.../img/xxx.jpg"> нужно указать полный путь (протокол и домен) до картинки.

в css такую svg нужно подключать особым образом

background: url("/img/xxx.svg"), url("/img/xxx.jpg");
background-size: auto auto, 0 0;

для ФФ подключаю svg с картинкой в data:url
background: url("/img/zzz.svg") 0 0 / -moz-calc(2000px) auto;


возни в итоге много. но это уже полноценный background
в ФФ есть глюки GPU рендринга , но они вроде не часты.