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 анимации!
Для кого предназначен этот курс:
- Каждый, кто хочет использовать мощь масштабируемой векторной графики, рисовать и анимировать красивые изображения, размещает эти творения во всемирной паутине.
ПРОДАЖНИК
Скрытое содержимое доступно для зарегистрированных пользователей!
Скрытое содержимое могут видеть только пользователи групп(ы): PREMIUM