Создание и использование SVG спрайтов?

Question

[Хороший Человек]

Добрый день коллеги!
Решил немного погрузиться в svg спрайты.
Создал в Illustrator новый файл, набросал из макета svg иконок, далее экспортировал "экспортировать как" дал имя sprite.svg. Потом выбрал следующие настройки:
И попробовал через background-image подключить и отобразить одну из иконок.
получилось вот так:
подключил еще в разметке, надеясь получить иконку инстаграма:

<object type="image/svg+xml" width="100" height="100" data="/img/sprite.svg#instagram"></object>

что дало такой же результат как и выше на скрине.
Я так понимаю, я не правильно создаю спрайт, или сохраняю. Помогите мне советом добрым, как сделать так, что бы при указании через background-position: 20px 20px; показывалось именно то что находится по этим координатам и работала привязка id как в представленом выше коде.
Спасибо

Comments

[Dark Hole]

Может, галку адаптивный svg убрать?

[Хороший Человек]

Dark Hole: попробую, спасибо

Answer 1

[Виолетта Морозова]

Мы svg-спрайты подключаем через background в css, а не через object. (работаем через TARS)
Почитайте эту статейку, может она вам когда-нибудь поможет https://svgontheweb.com/ru/ Пункт CSS-манипуляции, посмотрите и обязательно пункт Спрайты. Я думаю там есть то, что вам нужно.

Comments

[Хороший Человек]

Спасибо за информацию!

[Хороший Человек]

Очень интересно и много информации по делу, спасибо Виолетта!

[Виолетта Морозова]

Хороший Человек: я столкнулась с еще одним верным способом использовать svg-спрайты, но те, что были сгенерированы в каком-либо онлайн-сервисе.
"Нужно вставить скопированный svg спрайт. Открываете файл со сгенерированным спрайтом, копируете его код. И вставляете после открывающегося тега body. Чтобы вставить картинку из этого спрайта нужно использовать следующую конструкцию: https://jsfiddle.net/sbcvhmne/

[Хороший Человек]

Виолетта Морозова: Сейчас сделал сборку верстки на gulp в которой кроме всего прочего есть плагин, который генерирует из отдельных svg картинок один спрайт, а так же стили для него(работаю со stylus) по шаблону. Так я подразумеваю что все что в спрайте - это иконки и прочие красивости сайта - я ставлю их как background простым "@extend <имя_спрайта>". имя спрайта - это переменная, названная именем картинки плагином при генерации спрайта. В этой переменной есть все что нужно - ширина и высота, путь к спрайту, позиция на спрайте. Т.е сделал экстенд в стилях и все готово. накладывает некоторые особенности в плане верстки(все что из прайта должно браться в отдельный тег ибо высота с шириной заданы), но это не проблема. Считаю вариант годным, сейчас как раз тестю на вакуумном лендинге.
Одна пока проблема - изначально нужно осмысленные имена задавать файлам перед генерацией спрайта, а то я скопировал с макета и сохранил картинки так как дизайнер обозвал и в итоге имею что то типа такого названия: $speech-bubble-2

[Хороший Человек]

Виолетта Морозова: Но вариант с тегом интересный. Пробовала использовать? Какое мнение о таком подходе?

[Виолетта Морозова]

Хороший Человек: не, вариант с тегом пока возможности не было попробовать. Но я делаю так же как и ты) Мы же на работе TARSиспользуем, это тоже сборщик на gulp`е. Там у нас тоже есть скрипт - svg4everybody. Он не только генерирует спрайт из svg, но и для старых браузеров типа ie8-9 (у тарса есть их поддержка) из svg делает хорошего качества png и автоматически подставляет куда надо и какие надо стили прописывает. В scss инклудим как бэкграунд. @include bg-svg($ic-icon); ic-icon - тоже переменная, образованная от имени файла. У скрипта еще требование к именам, чтобы было через тире (-), по нижнему подчеркиванию не понимает почему-то. А дизайнер по подчеркиванию именует)) Приходится вручную сидеть и кучу иконок перелапачивать))

[Хороший Человек]

Виолетта Морозова: Да, с _дизанером_ косяк))
Посмотрел на статью про TARS - вроде интересно.
А был опыт работы с собственной сборкой на Gulp и если да, то какие плюсы у TARS перед собственноручной сборкой?
На сколько с ним удобно работать?
Что в нем нравится именно тебе?