Зарубежный материал [Udemy] SVG Fundamental. Полное руководство по спецификациям языков (2020)

Чему вы научитесь:

ОБРАЗОВАТЕЛЬНЫЙ МАРШРУТ [от простого к сложному (индуктивный метод познания)]:

1. Простейшие понятия [особенности системы координат в SVG, <svg> как элемент контейнера]​
2. Типы и применение основных форм [рисование (заливка маркеров), обтравочная маска] ...... ОТ 3. ДО 26. -> ВНУТРИ​
3. Расположение примитивов в системе координат и контроль их геометрических свойств [<rect>, <circle>, <ellipse>, <line>, <polyline>, <polygon>]​
4. Элемент <путь> и его применение в SVG [концепция текущей точки]​
5. Команда пути [moveTo (M, m), lineTo (L, l), curveTo (C, c, S, s), curveTo (Q, q, T, t), arc (A, a), closePath ( Z, Z)]​
6. Свойство «d» и синтаксис данных пути [ускорение рендеринга за счет минимизации размеров файла]​
7. Кривая Безье [кубическая, гладкая кубическая поли, квадратичная] и команды кривой эллиптической дуги и ее аргументы​
8. Варианты изменения стилей графических элементов​
9. Специфика правил CSS [расчет специфичности, приоритет применяемых стилей]​
10. Атрибуты презентации [использование, ограничения]​
11. Алгоритмы работы внутреннего агента пользователя в SVG [(rx, ry вычисление), (построение прямоугольника с закругленными углами), (рендеринг эллипса)]​
12. *** ЭКСКЛЮЗИВ: все параметры настройки изображения в SVG [концепция области просмотра в SVG, viewBox и его параметры, начальная система координат области просмотра, локальная система координат]​
13. Соотношение области просмотра и viewBox в SVG [преобразование системы координат при рендеринге изображения, влияние настроек области просмотра и viewBox на конечное изображение, функции панорамирования и масштабирования]​
14. Дополнительные параметры настройки изображения в SVG: атрибут <preserveAspectRatio> [<align> & <meetOrSlice> параметры]​
15. Вложенный видовой экран [единицы измерения, алгоритм расчета процента]​
16. Структура документа [фрагмент SVG, типы элементов], элемент группировки [<g> и его свойства], многократно используемый контент [<defs>, <use>, <symbol> элемент и их особенности применения]​
17. Рисование [типы графических элементов, атрибуты <fill> & <stroke>, различные способы рисования, значения <paint>, цветовые единицы SVG]​
18. Свойства заполнения [гибкость управления цветом в методах заполнения, алгоритм заполнения в случае свойства правила заполнения значения: <ненулевой>, алгоритм заполнения в случае свойства правила заполнения значения: <evenodd>, гибкий контроль непрозрачности]​
19. Свойства обводки [обводка, ширина обводки, непрозрачность обводки, порядок рисования], [значения обводки-штриховки (но, круглые, квадратные), значения обводки-линейного соединения (скос, круг, срез, дуги, обрезка среза), митра (расчет длины митры, предел митры)], [штрих-тире, штрих-тире смещения]​
20. Маркеры [сравнение атрибутов и свойств маркеров и элементов символов, алгоритм создания маркеров]​
21. Ограничивающие прямоугольники [три вида ограничивающих прямоугольников (объект, обводка, оформленный), открывающих ограничивающие прямоугольники различных элементов в коде]​
22. Серверы рисования [типы серверов рисования (градиенты, шаблоны), свойства серверов рисования, алгоритм агента пользователя сервера рисования]​
23. Градиенты [типы градиентов (линейные, радиальные), понятия вектора и нормалей, цветовые остановки, цветовые переходы]​
24. Линейный градиент [векторные атрибуты, градиентные остановки (элементы stop), атрибут <offset>, свойства stop-color, свойства stop-opacity, алгоритм построения линейного градиента пользовательским агентом во время рендеринга, GraduUnits (objectBoundingBox, userSpaceOnUse), GradientTransform (перевести, наклонить, повернуть, масштабировать), метод распространения (отступ, отражение, повтор)]​
25. Радиальный градиент [вектор (внутренняя и внешняя окружность и их геометрические свойства), стоп-цвет в радиальном градиенте]​
26. Шаблоны [заливка, обводка, концепция плитки; атрибуты (x, y, высота, ширина, patternUnits, viewBox, preserveAspectRatio, patternTransform, href, patternContentUnits)]​

Вкратце: вы получите теоретические знания и у вас будут реальные практические задания, которые закрепят ваши знания!

Требования:
Никаких особых требований

Описание:

SVG Основная учебная программа:

1. Демонстрация возможностей графики SVG. Для начала стоит посмотреть, что можно сделать с помощью инструмента, на который вы пришли, чтобы учиться.​

2. Самые простые понятия​
- особенности системы координат в SVG;​
- концепция контейнерных элементов;​
- элемент <svg> [первый упрощенный подход к концепции области просмотра].​

3. Типы основных форм. Нанесение базовых фигур [окраска (маркеры обводки), обтравочная маска]​
- элемент <rect> и его геометрические свойства [x, y, ширина, высота, rx, ry].​
4. Примитивы на основе геометрии радиуса​
- элемент <circle> и его геометрические свойства [cx, cy, r];​
- элемент <ellipse> и его геометрические свойства [cx, cy, rx, ry].​
5. Элемент <line> и его геометрические свойства [x1, y1, x2, y2]​
6. Примитивы на основе геометрии точек​
- элемент <polyline> и его геометрические свойства [points = «x1, y1, x2, y2… xn, yn»];​
- элемент <polygon> и его геометрические свойства [points = «x1, y1, x2, y2… xn, yn»].​
7. Элемент <path>. Приложение [создание формы, обтравочный контур, создание анимации, создание текста на пути]​
- текущая точка зрения [cpx, cpy];​
- команда пути [moveTo (M, m), lineTo (L, l), curveTo (C, c, S, s), curveTo (Q, q, T, t), arc (A, a), closePath (Z) , г)];​
- свойство «d». Синтаксис данных пути [d = ”M..L..C..A..Q..Z”];​
- краткий синтаксис [ускорение рендеринга путем минимизации размеров файлов с использованием синтаксических функций];​
- открытый и закрытый путь.​
8. Кубическая кривая Безье, гладкие кубические команды кривой Безье и ее геометрические свойства.​
9. Квадратичная кривая Безье, Гладкая квадратичная поли-Безье и ее геометрические свойства​
10. Команды эллиптической кривой дуги и их аргументы [Rx, Ry, вращение оси x, флаг большой дуги, флаг развертки, x, y]​
11. Варианты изменения стилей графических элементов​
- добавление элемента стиля внутри элемента SVG;​
- внешняя таблица стилей с использованием элемента link;​
- добавить атрибут style к элементу;​
- добавление атрибута стиля к необходимому элементу;​
- атрибуты представления.​
12. Специфика правил CSS.​
- расчет специфичности;​
- приоритет применяемых стилей.​
13. Атрибуты презентации​
- использование атрибутов презентации​
- ограничения​
14. Свойства геометрии: углубленный [Часть 1]​
- свойства rx и ry геометрии в деталях;​
- алгоритм расчета.​
15. Свойства геометрии: углубленный [Часть 2]​
- алгоритм построения прямоугольника с закругленными углами​
16. Свойства геометрии: углубленный [Часть 3]​
- алгоритм рендеринга эллипса​
17. Все параметры настройки изображения в SVG​
- концепция видового экрана в SVG;​
- viewBox и его параметры [x, y, ширина, высота];​
- начальная система координат окна просмотра;​
- локальная система координат​
18. Связь viewport и viewBox в SVG.​
- преобразование системы координат в рендеринг изображения;​
- влияние настроек viewport и viewBox на конечное изображение;​
- функции панорамирования и масштабирования.​
19. Окно просмотра и преобразования:​
- рендеринг изображения в случаях [viewport = viewBox, viewport> viewBox, viewport <viewBox]​
- функция масштабирования в механизме внутреннего агента пользователя​
20. Новые опции настройки изображения в SVG​
- атрибут <preserveAspectRatio>;​
- параметр <align>;​
- параметр <meetOrSlice>.​
21. Создание нового видового экрана SVG​
- вложенный видовой экран;​
- алгоритм расчета единиц и процентов.​
22. Структура документа​
- фрагмент SVG;​
- типы элементов [структурные элементы, структурные внешние элементы, графические элементы, графические ссылочные элементы]​
23. Группировка​
- элемент <g>​
- свойства элемента <g> как элемента контейнера​
24. Повторно используемый контент​
- элемент <defs>;​
- элемент <use>;​
- элемент <symbol>;​
- таблица сравнения атрибутов и свойств повторно используемых элементов содержимого.​
25. Особенности применения элемента <use>​
26. Живопись​
- типы графических элементов;​
- атрибут <fill>;​
- атрибут <stroke>;​
- разные способы покраски [один цвет, градиент, рисунок];​
- <краска> значения;​
- Цветовые единицы SVG [CSS Color Module Level 3].​
27. Заполните свойства​
- гибкость управления цветом в методах заливки;​
- алгоритм заполнения в случае значения свойства fill-rule: <ненулевой>;​
- алгоритм заполнения в случае значения свойства fill-rule: <evenodd>;​
- гибкий контроль непрозрачности.​
28. Свойства обводки [ход, ширина обводки, непрозрачность обводки, порядок рисования]​
29. Инсульт свойства:​
- значения штрих-линейного куба [но, круглые, квадратные];​
- значения штрих-линейного соединения [скос, круг, митра, дуги, митра-клип];​
- митра [расчет длины митры, предел митры];​
30. Инсульт свойства:​
- инсульт-дашаррай;​
- штрих-дашоффсет.​
31. Маркеры​
- таблица сравнения атрибутов и свойств маркеров и символьных элементов;​
- алгоритм создания маркера.​
32. Ограничительные рамки​
- три вида ограничительных рамок [объект, обводка, декорирование];​
- примеры выявления ограничительных рамок различных элементов в коде.​
33. Краска серверов:​
- типы серверов рисования [градиенты, шаблоны];​
- свойства серверов рисования;​
- алгоритм агента пользователя сервера рисования.​
34. Градиенты:​
- типы градиентов [линейный, радиальный];​
- понятия вектора и нормалей;​
- цветовые остановки, цветовые переходы.​
35. Линейный градиент: вектор атрибутов [x1, x2, x3, x4]​
- градиентные остановки [стоповые элементы];​
- атрибут <offset>;​
- свойства стоп-цвета;​
- свойства стоп-непрозрачности;​
- алгоритм построения линейного градиента пользовательским агентом при рендеринге;​
36. линейный градиент: другие атрибуты​
- GradientUnits [objectBoundingBox, userSpaceOnUse];​
- GradientTransform [перевод, наклон, поворот, масштаб];​
- метод распространения [pad, отражать, повторять];​
- href.​
37. Радиальный градиент​
- вектор [внутренняя и внешняя окружность];​
- внутренняя окружность [cx, cy, r];​
- внешняя окружность [fx, fy, r];​
- остановить цвет в радиальном градиенте.​
38. шаблоны [заливка, обводка]​
- концепция плитки;​
- атрибуты шаблона [x, y, высота, ширина, patternUnits, viewBox, preserveAspectRatio, patternTransform, href, patternContentUnits].​

-------------------------------------------------- -------------------------------------------------- ----------------------------------

РЕЗЮМЕ КУРСА:

Теория масштабируемой векторной графики:

  • Языковые элементы;
  • Синтаксис;
  • Структура;
  • Алгоритмы;
  • Типы данных.
Видео уроки содержат как базовые теоретические знания о спецификации SVG 2, так и примеры кодирования.

Масштабируемая векторная графика Практика:
  • Графические задания;
  • Модули HTML & CSS файлов;
  • Ответы.
Практическая часть курса ставит задачи для студента. И показывает возможные решения.

Как результат:
  • SVG знания и опыт;
  • Прочная основа для дальнейшего изучения SVG анимации!

Для кого предназначен этот курс:

Каждый, кто хочет использовать мощь масштабируемой векторной графики, рисовать и анимировать красивые изображения, размещает эти творения во всемирной паутине.
Язык: Английский


СКАЧАТЬ КУРС:

 

Обратите внимание

Назад
Сверху