abakumovaa
commented
4 days ago Всё сделала, запушила в ветку svg. Поначалу у меня была проблема с отображением иконок при использовании их через спрайт, я немного разобралась и у меня всё заработало, можешь проверять)
Предлагаю чуть глубже окунуться в вопрос работы с SVG и разобраться, как можно с ними эффективно работать. Ниже разбил изучение на шаги - переходи к следующему только когда отработала на практике предыдущий. Не нужно в теории всё просматривать и забивать голову кучей информации. Двигайся медленно, постепенно, всё отрабатывая собственноручно. P.s. я накидал ссылок, рекомендую ознакомиться с ними и если вдруг не получается или что-то непонятно - обязательно гуглить и находить другую информацию, где объясняют другими словами. Только смотри на год создания статьи / видео. Чтоб не сильно древняя была инфа, раньше 2020 года статьи я уже не смотрю даже)
1) Вот коротенькое видео про знакомство с форматами изображений: https://www.youtube.com/watch?v=YHV35GiXA-w
2) Оптимизировать SVG можно в данном сервисе (чтоб меньше кода было ненужного у SVG-иконки): https://jakearchibald.github.io/svgomg/ Попробуй позакидывать SVG-иконки и посмотреть, как изменяется их код.
3) Вот тут ознакомься с тем, каким образом можно подключать SVG-иконку https://webcademy.ru/blog/461/
4) Теперь стоит разобрать код SVG - что изменять, чтоб получить нужный результат https://webcademy.ru/blog/499/
5) Реализуй на сайте hover-эффект для всех SVG-иконок, предварительно подключив их inline (прям в коде прописав).
6) Теперь займёмся немного оптимизацией. Объединим все svg-иконки в один файл, называемый svg-спрайт. И будем все иконки дёргать оттуда https://siteok.org/blog/html/svg-sprajty/