- Регистрация
- 26.05.2022
- Сообщения
- 26 725
- Реакции
- 163
- Баллы
- 63
Автор: 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 анимации! Для кого предназначен этот курс: Каждый, кто хочет использовать мощь масштабируемой векторной графики, рисовать и анимировать красивые изображения, размещает эти творения во всемирной паутине. Язык: Английский Подробнее: Для просмотра содержимого вам необходимо авторизоваться. Скачать: Для просмотра содержимого вам необходимо авторизоваться |