AtriSimone
@AtriSimone
Осваиваю Front-end

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

Добрый день коллеги!
Решил немного погрузиться в svg спрайты.
Создал в Illustrator новый файл, набросал из макета svg иконок, далее экспортировал "экспортировать как" дал имя sprite.svg. Потом выбрал следующие настройки: 5b1b0f33de284827823eefb5a68058d8.png
И попробовал через background-image подключить и отобразить одну из иконок.
получилось вот так: 8b264e58ba6642d28c35b9347d01df4f.png
подключил еще в разметке, надеясь получить иконку инстаграма:
<object type="image/svg+xml" width="100" height="100" data="/img/sprite.svg#instagram"></object>

что дало такой же результат как и выше на скрине.
Я так понимаю, я не правильно создаю спрайт, или сохраняю. Помогите мне советом добрым, как сделать так, что бы при указании через background-position: 20px 20px; показывалось именно то что находится по этим координатам и работала привязка id как в представленом выше коде.
Спасибо
  • Вопрос задан
  • 2211 просмотров
Решения вопроса 1
vilka_2009
@vilka_2009
Верстаю
Мы svg-спрайты подключаем через background в css, а не через object. (работаем через TARS)
Почитайте эту статейку, может она вам когда-нибудь поможет https://svgontheweb.com/ru/ Пункт CSS-манипуляции, посмотрите и обязательно пункт Спрайты. Я думаю там есть то, что вам нужно.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы