Size: a a a

Чат — Типичный Верстальщик

2020 June 10

OG

Oleg Ganchev in Чат — Типичный Верстальщик
Alexandr Tumanov
Ребята, кто-нибудь знает решение, позволяющее собирать svg картинки в такой спрайт, из которого их можно будет подключать в background-image?
а что мешает подключать их в бэкграунд через запятую?
background: [<фон>, ]* <последний_фон>
источник

AT

Alexandr Tumanov in Чат — Типичный Верстальщик
Oleg Ganchev
а что мешает подключать их в бэкграунд через запятую?
background: [<фон>, ]* <последний_фон>
Не очень понял, что ты имеешь ввиду
источник

AT

Alexandr Tumanov in Чат — Типичный Верстальщик
Можно подробнее?
источник

OG

Oleg Ganchev in Чат — Типичный Верстальщик
Alexandr Tumanov
Можно подробнее?
пример из style.css
background: url("img/whatWeDo/what-back-corner1.svg") left 50% no-repeat, url("img/whatWeDo/what-back-corner2.svg") right bottom no-repeat, #f5f5f5;
в бэкграунде две картинки svg с указанием их положения и задан цвет фона.
источник

OG

Oleg Ganchev in Чат — Типичный Верстальщик
плюс данного решения - можно легко менять положение svg через медиа-запросы, если в разных разрешениях нужно разное положение картинок в бэкграунде.
источник

AT

Alexandr Tumanov in Чат — Типичный Верстальщик
Аа.. Я понял..
Я немного не эту ситуацию имел ввиду
источник

AT

Alexandr Tumanov in Чат — Типичный Верстальщик
Не множественный бакграунд, а подключение разных картинок в разных случаях из единого спрайта
источник

AT

Alexandr Tumanov in Чат — Типичный Верстальщик
<code>background: url('sprite-remote.svg#cloud-view') top left no-repeat;</code>
источник

AT

Alexandr Tumanov in Чат — Типичный Верстальщик
Не знаю, как тут код форматировать )
источник

AT

Alexandr Tumanov in Чат — Типичный Верстальщик
Короче, когда один спрайт содержит много <symbol id="instagram" viewBox="0 0 42 42">...</symbol>
источник

AT

Alexandr Tumanov in Чат — Типичный Верстальщик
И к ним можно обращаться через # в url()
источник

OG

Oleg Ganchev in Чат — Типичный Верстальщик
Alexandr Tumanov
Не множественный бакграунд, а подключение разных картинок в разных случаях из единого спрайта
Извини, слишком быстро прочитал вопрос...
я таким не пользовался, в ссылках валяется этот
https://svgsprit.es/
источник

AT

Alexandr Tumanov in Чат — Типичный Верстальщик
Спасибо 😊
источник

AT

Alexandr Tumanov in Чат — Типичный Верстальщик
Не умеет он такое..
источник

AT

Alexandr Tumanov in Чат — Типичный Верстальщик
Чувствую, самому сочинять придется
источник

AT

Alexandr Tumanov in Чат — Типичный Верстальщик
Там мало их в символы объединить. Такое многие npm инструменты умеют. Там еще надо смещения между ними посчитать для поддержки некоторых браузеров. И ссылки <use xlink:href="#zoom_" style="fill: #fff;" width="64" height="64" x="0" y="1830"></use> сформировать, с учетом смещения
источник

AT

Alexandr Tumanov in Чат — Типичный Верстальщик
источник

AT

Alexandr Tumanov in Чат — Типичный Верстальщик
Вот статейка на эту тему
источник

А

Артём in Чат — Типичный Верстальщик
Здесь из беседы кто уже работает фриланс/компания или учитесь для себя и т п?
источник

AT

Alexandr Tumanov in Чат — Типичный Верстальщик
Артём
Здесь из беседы кто уже работает фриланс/компания или учитесь для себя и т п?
В этом чате много бесед, дружище )
Какую именно, ты имеешь ввиду?
источник