[Udemy] SVG Fundamental [Полное руководство по спецификациям языков 2020]
Чему вы научитесь
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 анимации!
Для кого предназначен этот курс:
ПРОДАЖНИК
СКАЧАТЬ
Чему вы научитесь
- ОБРАЗОВАТЕЛЬНЫЙ МАРШРУТ [от простого к сложному (индуктивный метод познания)]: 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 анимации!
Для кого предназначен этот курс:
- Каждый, кто хочет использовать мощь масштабируемой векторной графики, рисовать и анимировать красивые изображения, размещает эти творения во всемирной паутине.
ПРОДАЖНИК
СКАЧАТЬ
Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.
