3.95 (72 reviews)
☑ 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!
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
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]
- <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
- 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 ;
- 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.
- 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];
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].
Scalable Vector Graphics Theory:
· language elements;
· 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;
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!
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
The paint operations. <paint> values. SVG color units
Stroke properties [stroke, stroke-width, stroke-opacity, paint order]
Stroke properties: stroke-linecup, stroke-linejoin
Stroke properties [stroke-dasharray & stroke-dashoffset]
Paint servers [gradients & patterns]
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]
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.
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.
Happy Easter. Dynamic course. Without boring out of scope discussions. Please, increase English, some mistakes are annoying. Good luck
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.
Highly detailed material on scalable vector graphics. I recommend it to those who want to study or deepen their knowledge.
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.
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 :)
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
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.
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!!!
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!