[Glo Academy] Курс по SVG-графике, 2019 (Артём Исламов)

Чему научитесь?
Если в двух слова, то на этом курсе научитесь создавать и использовать интерактивные элементы интерфейса для сайта.
Сможете анимировать векторные изображения, создавать базовые фигуры и делать прелоадеры.

Программа курса:
Подготовительный урок
Знакомство с курсом. Настройка рабочего пространства.

1. Установка редактора кода
2. Установка векторного редактора

Урок №1. Вставка SVG на страницу. Размеры SVG
Способы встраивания SVG графики в html структуру. Манипулирование с размерами изображения.

В этом уроке вы узнаете: как создавать svg-изображение, как размещать на странице

1. Создаем и сохраняем svg для веба.
2. Способы вставки SVG-изображения
   1. Через тег <img>
   2. Как background-image
   3. Через тег <svg>
   4. Через тег <object>
3. Работа с SVG-документов
   1. width, height
   2. viewBox
   3. preserveAspectRatio

Урок №2. Базовые фигуры SVG. Атрибуты и свойства
Создание базовый фигур. Работа с атрибутами и свойствами.

В этом уроке: вы познакомитесь с XML, научитесь редактировать svg прямо в html коде и познакомитесь с базовым синтаксисом.

1. Настраиваем рабочее пространство
2. Переходим к практике:
3. <rect> + подключение внешнего файла стилей
4. <circle>
5. <ellipse>
6. <line>
7. <polyline>
8. path

Урок №3. Анимирование векторного изображения
Способы анимирования svg изображения, знакомство с библиотекой snap.js

В этом уроке вы узнаете: как анимировать векторное изображение с помощью css, js, SMIL.

1. CSS анимирование
2. SMIL
3. JS (Snap.js)

Урок №4. SVG Preloader. Знакомство с библиотекой SVG.JS
Создаем свой собственный прелоадер с нуля.

В этом уроке вы узнаете: как сделать кастомный прелоадер для сайта.

1. Создаем SVG-изображение
2. Вставляем на страницу.
3. Подключаем библиотеку SVG.js
4. Анимируем, используя библиотеку SVG.js

Урок №5. SVG Фильтры
Фильтры svg и зачем их использовать.

В этом уроке вы узнаете: как пользоваться фильтрами svg и как их использовать на практике.

1. Поддержка браузерами
2. Фильтр цветовой матрицы. Меняем цвет карточки товара.
3. Фильтр размытия. Создаем элемент с частичным размытием
4. Смешивание фильтров. Создание элемента интерфейса - меню.