Udemy

Platform

English

Language

Web Development

Category

SVG Fundamental

Scalable Vector Graphics ( SVG ) Version 2 W3C specification. Learn SVG Theory & Practice [ HTML CSS SVG ]

3.95 (72 reviews)

Students

3 hours

Content

May 2021

Last Update
Regular Price

Topics

SKILLSHARE
SkillShare
Unlimited access to all SkillShare courses
EXCLUSIVE 30-DAY FREE TRIAL

What you will learn

EDUCATIONAL ROUTE [from simple to complex (inductive method of cognition)]:

1. The simplest concepts [coordinate system features in SVG, <svg> as a container element]

2. Types & Application of basic shapes [painting (fill stroke markers), clipping mask] ......FROM 3. TO 26. -> INSIDE

3. Positioning of primitives in the coordinate system and control of their geometric properties [<rect>, <circle>, <ellipse>, <line>, <polyline>, <polygon>]

4. Element <path> and its application in SVG [current point concept]

5. Path command [moveTo(M,m), lineTo(L,l), curveTo(C,c,S,s), curveTo(Q,q,T,t), arc(A,a), closePath(Z,z)]

6. “d” property & Path data syntax [speed up rendering by minimizing file sizes]

7. Bezier curve [cubic, Smooth cubic poly, Quadratic] & Elliptical arc curve commands and its arguments

8. Options for changing styles of graphic elements

9. The CSS rules specificity [specificity calculation, priority of applied styles]

10. Presentation attributes [using, limitations]

11. Internal user agent operation algorithms in SVG [(rx, ry calculation),(constructing a rectangle with the rounded corners), (ellipse rendering)]

12. ***EXCLUSIVE: All the image customization options in the SVG [the concept of viewport in SVG, viewBox and its parameters, viewport initial coordinate system, local coordinate system]

13. The relationship of viewport and viewBox in SVG [transformation of coordinate system in image rendering, the effect of the viewport and viewBox settings on the final image, pan and zoom functions]

14. Advanced image customization options in the SVG: <preserveAspectRatio> attribute [<align> & <meetOrSlice> parameters]

15. Nested viewport [units, percentage calculation algorithm]

16. Document structure [SVG fragment, types of elements], Grouping [<g> element and its properties], Reusable content [<defs>, <use>, <symbol> element and their application features]

17. Painting [types of graphic elements, <fill> & <stroke> attributes, different ways of painting, <paint> values, SVG color units]

18. Fill properties [color control flexibility in fill methods, fill algorithm in case of value fill-rule property: <nonzero>, fill algorithm in case of value fill-rule property: <evenodd>, flexible control of opacity]

19. Stroke properties [stroke, stroke-width, stroke-opacity, paint order], [stroke-linecup values (but, round, square), stroke-linejoin values (bevel, round, miter, arcs, miter-clip), miter (miter-length calculation, miter-limit)], [stroke-dasharray, stroke-dashoffset]

20. Markers [comparing attributes and properties of markers & symbol elements, marker creation algorithm]

21. Bounding boxes [three kinds of bounding boxes (object, stroke, decorated), revealing bounding boxes of various elements in code]

22. Paint Servers [types of paint servers (gradients, patterns), paint servers properties, paint server user agent algorithm]

23. Gradients [types of gradients (linear, radial), concepts of vector and normals, color stops, color transitions]

24. Linear Gradient [vector attributes, gradient stops (stop elements), <offset> attribute, stop-color properties, stop-opacity properties, algorithm for constructing a linear gradient by a user agent during rendering, gradientUnits (objectBoundingBox, userSpaceOnUse), gradientTransform (translate, skew, rotate, scale), spreadMethod (pad, reflect, repeat)]

25. Radial gradient [vector (inner & outer circumference and their geometric properties), stop color in radial gradient]

26. Patterns [fill, stroke, tile concept; attributes (x,y,height,width, patternUnits, viewBox, preserveAspectRatio, patternTransform, href, patternContentUnits)]

BRIEFLY SUMMARIZING: You will get theoretical knowledge & You will have real practical assignments, which will consolidate your knowledge!


Description

SVG Fundamental CURRICULUM:


1. Demonstration of the capabilities of SVG graphics. To begin with, it’s worth seeing what you can do with the tool that you came to study.


2. The simplest concepts

- coordinate system features in SVG;

- container element concept;

- <svg> element [first simplified approach to the concept of viewport].


3. Types of basic shapes. Application of basic shapes [painting (fill stroke markers), clipping mask]

- <rect> element and it’s geometric properties [x,y, width, height, rx, ry].


4. Primitives based on the geometry of radius

- <circle> element and it’s geometric properties [cx, cy, r];

- <ellipse> element and its geometric properties [cx, cy, rx, ry].


5. <line> element and its geometric properties [x1,y1,x2,y2]


6. Primitives based on the geometry of points

- <polyline> element and its geometric properties [points = “x1,y1,x2,y2 … xn,yn”];

- <polygon> element and its geometric properties [points = “x1,y1,x2,y2 … xn,yn”].


7. <path> element. Application [shape creation, clipping path, creating an animation, create text on a path]

- current point concept [cpx, cpy];

- path command [moveTo(M,m), lineTo(L,l), curveTo(C,c,S,s), curveTo(Q,q,T,t), arc(A,a), closePath(Z,z)];

- “d” property. Path data syntax [d=”M..L..C..A..Q..Z”];

- concise syntax [speed up rendering by minimizing file sizes using syntax features];

- open & closed path.


8. The cubic Bezier curve, Smooth cubic poly Bezier curve commands and its geometric properties


9. Quadratic Bezier Curve, Smooth Quadratic poly Bezier and its geometric properties


10.Elliptical arc curve commands and its arguments [Rx, Ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y]


11. Options for changing styles of graphic elements

- adding style element inside svg element;

- external stylesheet using the link element;

- add the style attribute to the element;

- adding a style attribute to the required element;

- presentation attributes.


12. The CSS rules specificity.

- specificity calculation;

- priority of applied styles.


13. Presentation attributes

- using of presentation attributes

- limitations


14. Geometry properties: in-depth [Part1]

- rx and ry geometry properties in detail;

- rx, ry calculation algorithm.


15. Geometry properties: in-depth [Part2]

- algorithm of the constructing a rectangle with the rounded corners


16. Geometry properties: in-depth [Part3]

- algorithm of the ellipse rendering



17.  All the image customization options in the SVG

- the concept of viewport in SVG;

- viewBox and its parameters [x, y, width, height];

- viewport initial coordinate system;

- local coordinate system


18. The relationship of viewport and viewBox in SVG.

- transformation of coordinate system in image rendering;

- the effect of the viewport and viewBox settings on the final image;

- pan and zoom functions.


19. The viewBox and transformations:

- image rendering in cases [viewport=viewBox, viewport>viewBox, viewport<viewBox]

- transform-scale function in the internal user agent mechanism


20. New image customization options in the SVG

- the <preserveAspectRatio> attribute;

- parameter <align>;

- parameter <meetOrSlice>.


21. Establishing a new SVG viewport

- nested viewport;

- units and percentage calculation algorithm.


22. Document structure

- SVG fragment;

- types of elements [structural elements, structural external elements, graphics elements, graphics referencing elements]


23. Grouping

- <g> element 

- properties of <g> element as a container element


24. Reusable content

- <defs> element;

- <use> element;

- <symbol> element;

- table comparing attributes and properties reusable content elements.


25. Application features of the <use> element


26. Painting

- types of graphic elements;

- <fill> attribute;

- <stroke> attribute;

- different ways of painting [single color, gradient, pattern];

- <paint> values;

- SVG color units [CSS Color Module Level 3].


27. Fill properties

- color control flexibility in fill methods;

- fill algorithm in case of value fill-rule property: <nonzero>;

- fill algorithm in case of value fill-rule property: <evenodd>;

- flexible control of opacity.


28. Stroke properties [stroke, stroke-width, stroke-opacity, paint order]


29. Stroke properties:

- stroke-linecup values [but, round, square];

- stroke-linejoin values [bevel, round, miter, arcs, miter-clip];

- miter [miter-length calculation, miter-limit];


30. Stroke properties:

- stroke-dasharray ;

- stroke-dashoffset.


31. Markers

- table comparing attributes and properties of markers & symbol elements;

- marker creation algorithm.


32. Bounding boxes

- three kinds of bounding boxes [object, stroke, decorated];

- examples of revealing bounding boxes of various elements in code.


33. Paint Servers:

- types of paint servers [gradients, patterns];

- paint servers properties;

- paint server user agent algorithm.


34. Gradients:

- types of gradients [linear, radial];

- concepts of vector and normals;

- color stops, color transitions.


35. linear Gradient: the vector of attributes [x1,x2,x3,x4]

- gradient stops [stop elements];

- <offset> attribute;

- stop-color properties;

- stop-opacity properties;

- algorithm for constructing a linear gradient by a user agent during rendering;


36. linear Gradient: other Attributes

- gradientUnits [objectBoundingBox, userSpaceOnUse];

- gradientTransform [translate, skew, rotate, scale];

- spreadMethod [pad, reflect, repeat];

- href.


37. Radial gradient

- vector [inner & outer circumference];

- inner circumference [cx, cy, r];

- outer circumference [fx, fy, r];

- stop color in radial gradient.


38. patterns [fill, stroke]

- tile concept;

- pattern attributes [x,y,height,width, patternUnits, viewBox, preserveAspectRatio, patternTransform, href, patternContentUnits].

--------------------------------------------------------------------------------------------------------------------------------------

COURSE SUMMARY:


Scalable Vector Graphics Theory:

· language elements;

· syntax;

· structure;

· algorithms;

· data types.

Video tutorials contain both basic theoretical knowledge of the SVG 2 specification, as well as coding examples.


Scalable Vector Graphics Practice:

· Graphical assignments;

· HTML & CSS files modules;

· answers.

The practical part of the course sets tasks for the student. And shows possible solutions.


As a result:

· SVG knowledge and experience;

· The solid foundation for further study of SVG animation!



Screenshots

SVG Fundamental
SVG Fundamental
SVG Fundamental
SVG Fundamental

Content

Introduction

Instructors skills in scalable vector graphics. Graphics ENGINE for this course!

The simplest concepts: сoordinate system, <svg> container element, basic shapes

C.S features <svg>element [first simplified approach to the concept of viewport]

Types & Application of Basic Shapes. <rect> geometry [x,y,width,height,rx,ry]

<circle> <ellipse> <line> elements and its geometric properties

<polyline> [points = “x1,y1, … xn,yn”] <polygon> [points = “x1,y1, … xn,yn”]

<path> element [purpose, application]. C.P. concept. “d” property [Path data]

Path data[syntax]. C.P. concept. moveTo(M,m) lineTo(L,l) closePath(Z,z) commands

The cubic Bézier curve, Smooth cubic poly Bezier curve and its geometry

Quadratic Bezier Curve, Smooth Quadratic poly Bezier and its geometry

elliptical arc curve [Rx, Ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y]

Styling. Presentation attributes & geometry properties. CSS rules specificity

Options for changing styles of SVG graphic elements

The CSS rules specificity. Specificity calculation. Priority of applied styles

Geometry properties & Presentation attributes. Using. Limitations

G.P in-depth [Part1]. rx and ry in detail. rx, ry calculation algorithm

G.P in-depth [Part2]. Algorithm of the rectangle with the rounded corners

G.P in-depth [Part3]. Algorithm of the ellipse rendering

The concept of viewport in SVG, viewBox and its parameters [x, y, width, height]

The concept of viewport & viewBox in SVG. Initial & Local coordinate systems

The relationship of viewport and viewBox in SVG

The viewBox and transformations

The preserveAspectRatio attribute

Establishing a new SVG viewport [nested viewport, units]

Document structure [Types of elements, Grouping (<g> element), Reusable content]

SVG fragment, types of elements

Grouping. Element <g>. Properties of <g> element as a container element

Reusable content [<defs> <use> <symbol> elements]

Application features of the <use> element

Painting

The paint operations. <paint> values. SVG color units

Fill properties

Stroke properties [stroke, stroke-width, stroke-opacity, paint order]

Stroke properties: stroke-linecup, stroke-linejoin

Stroke properties [stroke-dasharray & stroke-dashoffset]

Markers

Bounding box

Paint servers [gradients & patterns]

Paint Servers

Gradients [types, vector, normal, color stops, color transitions]

linear Gradient: the vector attributes [x1,x2,x3,x4]

linear Gradient other Attributes[gradientUnits, gradientTransform, spreadMethod]

Radial gradient [vector, inner & outer circumference,- stop color]

patterns [tile concept, types, attributes]


Reviews

L
Laureen20 May 2021

The content in the vids is extremely basic and doesn't cover important elements like syntax. The instructor wants students to struggle to learn ("learn by doing") but in that model, you generally provide the information that is unimportant but difficult to guess (like syntax) and not the obvious stuff. They clearly put a lot of work into this, but just didn't make great choices, in terms of what they prioritized. If I didn't already know everything covered so far, I'm not sure how much I would've followed.

C
Carlo10 May 2021

The course offers a viable introduction to SVGs, however, the music in the background is very disturbing, the exposition confusing, the exercises badly designed, and quite frankly, you'd be better off reading the Mozilla docs than following this course. Especially at its full price.

M
Misha28 April 2021

Happy Easter. Dynamic course. Without boring out of scope discussions. Please, increase English, some mistakes are annoying. Good luck

D
David13 March 2021

I liked the structure and design of this course. Very detailed SVG theory. Practical modules! I would like to see more courses like this one.

A
Alice3 March 2021

Highly detailed material on scalable vector graphics. I recommend it to those who want to study or deepen their knowledge.

K
Keith5 January 2020

A bit to much maths for me but I got a good understanding and how to create and apply custom svgs. Instruction was very professional and concise, enjoyed course even with maths and after some practical projects I intend to review this course again as the maths once understood would allow much more.

S
Sofia4 January 2020

A curious detail for future students: in the commercial, the author talks about different effects from two different types of courses: 1. "Repeat after me" 2. "Learn the principles and do new things yourself." Honestly speaking, I’m tired of repeating, and I’m tired of seeing “Look how good I am, repeat after me” - this is a stomp on the spot. I would call it not studying, but acquaintance with the creativity of another person and nothing more. And type 2 courses are very few. Perhaps they are much more difficult to create. Or maybe no one has a desire to grow their competitors. In short, I was lucky to study one of the courses of the second type - "SVG Fundamental". As a result - I can realize my imagination and be happy and not repeat someone else’s and be someone’s clone :)

G
Giovanny2 December 2019

I had some prior knowledge of SVGs but I wish I would have started with this course. The struggles I had were completely removed through advancing in this course. I'm impressed with the presentation and how the instructors direct you step by step in a way that you can easily absorb the material. I strongly recommend this course for anyone who wishes to learn or polish up their knowledge of Fundamental of SVGs

V
Vlad2 December 2019

Great course with a tone of really useful information that you need to create SVG Master. The instructor takes you through theoretical knowledge about scalable vector graphics to basic structures of SVG. A very well structured and easy to follow the course. Deferentially deserved 5 stars.

F
Faruk22 October 2019

I completed HTML, CSS and js without learning much about SVG because no lessons give much time in it. So I was looking for a course, especially for SVG. I got this fantastic course. Just Awesome!!!

J
Jonathan18 October 2019

At the end of the course, I can confidently say: excellent development. Awesome design. Clearly structured and systematized material. I was lucky to get to know SVG with this course. There was a desire and opportunity to apply the acquired skills in my future work. Practical material, helped me learn lessons and consolidate practice. It was wonderful. Many thanks. I will be waiting for your new courses in web development!


Related Courses

SKILLSHARE
How to use SVG images with WordPress & Elementor
How to use SVG images with WordPress & Elementor
SKILLSHARE
How to Design Metallic Logos in 5 minutes | Rose Gold, Gold, Silver SVG Files in Adobe Illustrator
How to Design Metallic Logos in 5 minutes | Rose Gold, Gold, Silver SVG Files in Adobe Ill
SKILLSHARE
Creative Coding: Animating SVG with Simple CSS Code
Creative Coding: Animating SVG with Simple CSS Code

2597748

Udemy ID

10/8/2019

Course created date

10/22/2019

Course Indexed date
Bot
Course Submitted by

Twitter
Telegram