SVG Fundamental

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!