1,0×
248 просмотров · 2 года назад
00:00/47:41
- Вступление
Описание
SVG. Руководство по использованию векторных изображений
2 года назад • 248 просмотров22 поставили "Нравится"
Привет! SVG уже давно вошел в веб-разработку как некий стандарт для создания иконок на страницах. Данный формат легче, удобнее, производительнее и просто четче, потому что при изменении размеров не меняется четкость изображения. В этом видео я расскажу, как использовать и создавать svg-графику на сайтах. Поехали!Поддержать канал на boosty: boosty.to/maxgraph
Исходное видео: youtu.be/ODWF3h2VDLM
Дата выпуска: 14 августа 2020
Содержание:
00:00 - Вступление
02:18 - Виды подключения svg на страницу
07:10 - Как создавать svg-изображения с нуля
19:07 - Про размеры и viewBox
20:33 - Про теги g, defs
22:22 - Тег path
31:11 - Заливка и обводка
37:11 - SVG-спрайты в html-файле
42:08 - SVG-спрайты во внешнем файле
44:30 - Пример простого градиента в SVG
46:32 - Заключение
github.com/...0%B8%D0%B9 - примеры из видео
blog.maxgraph.ru/...ez-symbol/ - моя статья про вставку svg
codepen.io/...en/abbLdeO - пример svg-градиента
Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Поддержать канал: boosty.to/maxgraph
Моя страница вконтакте: vk.com/maxdenaro
Мой блог: blog.maxgraph.ru
Карта канала: blog.maxgraph.ru/ytmap/
Яндекс.Дзен: zen.yandex.ru/...00b366805f
Мой сайт: maxgraph.ru
Канал в телеграм: t.me/maxgraph
Чат для верстальщиков: t.me/maxgraph_chat
#обучение #svg #векторнаяграфика