SVG-спрайт (+ бонус про тег picture) — Фронтенд-разработка скачать в хорошем качестве

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

Привет, это 11й урок из моего курса по фронтенд-разработке в университете ИТМО и сегодня мы с вами поговорим про SVG-спрайт, разберёмся что это, как использовать и почему он лучше иконочных шрифтов. Так же, бонусом рассмотрим тег picture и создание кроссбраузерных картинок с его помощью. Полезные ссылки: Мой телеграм-канал: https://t.me/davidobryakov Репозиторий с примерами из этого курса: https://github.com/kantegory/mentoring/ Репозиторий этого курса: https://github.com/kantegory/ITMO-ICT... Простой гайд по составлению svg-спрайта: https://www.sitepoint.com/use-svg-ima... Видео-гайд по svg-спрайту:    • Как создавать SVG спрайты? | SVG Sprites   Статья на CSS-tricks по svg-спрайту: https://css-tricks.com/svg-sprites-us... Статья на Доке про тег picture: https://doka.guide/html/picture/ Статья на MDN про тег picture: https://developer.mozilla.org/en-US/d... Видео Вадима Макеева про тег picture:    • Skillbox, оптимизация графики, Squoosh и э...   Squoosh (приложение для удобного сжатия изображений): https://squoosh.app Таймкоды: 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 Заключение