Много svg-изображений в одном файле для бэкграунда — как задавать?

Question

[Настя]

Слышала, что можно сохранить несколько svg-изображений в одном файле на разных артбоардах, чтоб было меньше запросов. И по идее путь к нужному артбоарду прописывается довольно просто (а не как в png-спрайтах, левый нижний угол и проценты...).
Подскажите, кто знает, как прописать правильно путь?

Answer 1

[Grigruss]

htmlhook.ru/svg-image-sprite.html - !!!
nano.sapegin.ru/all/vyorstka-vektornogo-logotipa-s...
noteskeeper.ru/1061

Comments

[Настя]

спасибо, на первую ссылку я натыкалась. Посмотрела все, либо это не совсем то, либо до меня не доходит (с svg почти не работала). Мне нужно залить на бэкграунд относительно сложный svg-файл (паттерн). Сейчас я на каждый блок заливаю этот фон вот так, с заглушкой png для IE:

.p3 {
background-image: url(../i/p3.png);
background-image:url(../i/p3.svg), none;
background-repeat:no-repeat;
background-size:contain;
}

Можно ли в стилях через background залить файл со множеством svg и прописать путь к нужному артбоарду?

[Grigruss]

Настя: можно. По второй и по третьей ссылке как раз об этом говорится. будет что-то вроде url(../i/p3.svg#sprite1);
В файле SVG спрайты отмечены через ID, по которым к ним можно обратиться через решётку (#) после имени файла.

[Grigruss]

Настя: а по первой ссылке проще понять, как должны быть описаны спрайты в файле.

[Настя]

Григорий: Спасибо, буду пробовать!

[Grigruss]

Настя: где-то я еще читал, и даже когда то пробовал, сжимать SVG в ZIP или GZ, тогда еще меньше трафика получается... ну это уже так, для пущего навароту, если SVG совсем большой и долго грузится. ))

Answer 2

[Настя]

Григорий, не получается(
после сохранения ai файла в svg открываю этот svg в редакторе. вроде все ок, имеются <g id="lay01"> и так далее по числу артбоардов. Вставляю бэкграундом:

.p1 {
	background-image:url(../i/patterns_all.svg#lay01);
}

Какой бы id я не проставляла, отображается только первый артбоард или тот, на котором (гм) было выделение в момент сохранения.

Попробовала задать классы каждому <g id="lay01" class="svgpattern"> и прописала в стилях, как советуют в первой ссылке:

.svgpattern { display: none; }
.svgpattern:target { display: inline; }

не помогло(
правда у меня сложные svg, больше 100 строчек кода на 1 объект/артбоард... Может в этом дело?
вебкит/не вебкит - не влияет, нигде не срабатывает.

Comments

[Grigruss]

Вообще SVG может не адекватно себя вести, если создан в графических программах. Я создаю их в InkScape, потом пытаюсь открыть в AI или Corel, по одной точке с каждого объекта убегает в правый верхний угол, приходится корректировать... Конечно лучше знать сам формат, благо что это возможно, т.к. это текстовый XML...
Думаю стоит погуглить. Если по первой ссылке пишут, что возможно использовать спрайты в одном файле, значит так оно и есть. Надо только разобраться как...

[Настя]

Григорий, спасибо за помощь) Оказалось сложнее чем я думала, но попробую разобраться) Мне тоже кажется, что SVG код, сгенерированный люстрой может быть не совсем корректным. Если все самому прописывать в редакторе, то должно быть без багов. Или править сгенерированный графическим редактором файл.

[Grigruss]

Настя: Не за что! ) Пока знаний формата не хватает, быстрее получится править сгенерированный. Когда изучите формат, можно будет в блокноте с нуля писать. )