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

[Laely]

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

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

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 анимации!

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

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


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

Авторизуйтесь, чтобы посмотреть скрытый контент