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


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

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

Язык: Английский

ПРОДАЖНИК

СКАЧАТЬ