SVG-спраит (+ бонус про тег picture) Фронтенд-разработка

Привет, это 11й урок из моего курса по фронтенд-разработке в университете ИТМО и сегодня мы с вами поговорим про SVG-спрайт, разберёмся что это, как использовать и почему он лучше иконочных шрифтов. Так же, бонусом рассмотрим тег picture и создание кроссбраузерных картинок с его помощью. Полезные ссылки: Мой телеграм-канал: Репозиторий с примерами из этого курса: Репозиторий этого курса: Простой гайд по составлению svg-спрайта: Видео-гайд по svg-спрайту: Статья на CSS-tricks по svg-спрайту: Статья на Доке про тег picture: Статья на MDN про тег picture: Видео Вадима Макеева про тег picture: Squoosh (приложение для удобного сжатия изображений): Таймкоды: 00:00 Вступление 00:15 План урока 00:40 Что такое SVG-спрайт? 01:29 Какие проблемы решает SVG-спрайт? 02:36 Почему именно спрайт, а не иконочный шрифт? 05:57 Пример работы с SVG-спрайтом 09:16 Добавим новую иконку в SVG-спрайт 11:53 Что почитать про SVG-спрайт? 13:20 Что такое тег picture и для чего он нужен? 13:58 Пример работы с тегом picture 15:54 Попробуем подключить AVIF 20:02 Что почитать про тег picture? 21:12 Заключение