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, оптимизация графики, Squoos...
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 Заключение