SVG Fundamental

Learning the theoretical foundations of SVG & SVG Animation [ W3C specification in detail ]. Homework practice.

3.90 (156 reviews)
Udemy
platform
English
language
Web Development
category
instructor
SVG Fundamental
2,382
students
4.5 hours
content
Sep 2023
last update
$74.99
regular price

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!

Why take this course?

Do you want to learn Scalable Vector Graphics (SVG)? Perhaps you already have basic knowledge and want to deepen and expand it? Congratulations! You are on the right track.

This course provides the most complete and detailed information on the Scalable Vector Graphics standard of the W3C (World Wide Web Consortium) specification.

Today, 99% of the World Wide Web sites actively use this standard. Take a look at some of the benefits of SVG:

- scales without loss in image quality, which means it is ideal for responsive sites (graphic elements of such sites should be displayed without distortion at any screen resolution);

- has a small "weight" due to the ability to good compression (any site, ideally, should load quickly);

- supported by all modern browsers (SVG is fully compatible with web technologies and therefore becomes an organic part of sites);

- easy to use and easy to modify (the format allows you to set the necessary settings for color, shadow, blur and other design effects, both in a graphics editor and on the page itself using CSS, JavaScript);

- animated and made interactive (adding objects to the digital description of the picture and connecting scripts of the Javascript programming language to them);

- SVG is a text format, so you can optimize the file for SEO without external meta tags by directly entering keywords into the image code

And believe me, that's not all! To appreciate all the advantages of SVG, you need to work with it. But first, you should study it!


A classic academic learning model awaits you, allowing you to activate thinking, creativity and create new things.

In the video lessons of this course, you will become familiar with the theory of Scalable Vector Graphics (language elements, syntax, structure,  algorithms, data types).

All the practical part is attached to the lessons. Here you will find pdf documents summarizing lecture materials as well as homework modules (HTML & CSS files), where specific practical goals will be set for you. You will also find modules with answers (showing one of the possible options for the implementation of the task).

The academic model of training has proven itself all over the world for a long time and today there is no alternative to it in terms of the effectiveness of training specialists.

Basically, if you are looking for a hands-on course to learn a few tricks using SVG then DON'T take the course. Find the course where the instructor types the code and repeat. Everyone else: you should take the course, today!

Screenshots

SVG Fundamental - Screenshot_01SVG Fundamental - Screenshot_02SVG Fundamental - Screenshot_03SVG Fundamental - Screenshot_04

Our review

šŸ“š **Course Overview: SVG Fundamentals** **Global Rating:** 4.30/5.00 **Recent Reviews Summary:** **Pros:** - āœ… **Theoretical and Practical Depth:** Many reviewers appreciated the course for its in-depth theoretical knowledge and practical exercises that helped them understand and apply SVG concepts effectively. - āœ… **Structured Learning:** The step-by-step approach was praised for making the material easy to absorb, with some users recommending it for anyone interested in learning or improving their skills in SVGs. - āœ… **Practical Application:** Users reported being able to realize their imagination and apply their skills after completing the course, which they found rewarding. - āœ… **Well-Structured Content:** The course was commended for its clear structure, systematized material, and well-organized modules that facilitated learning and consolidation of practice. - āœ… **Homework Exercises:** Homeworks were highlighted as a strong point, with users appreciating the inclusion of PDFs and code alongside exercises to enhance understanding. **Cons:** - āŒ **Math Content Intimidation:** Some users found the math content a bit challenging and felt it could be overwhelming for beginners. - āŒ **Music in Videos:** The background music in some videos was reported to be distracting and made it difficult for users to focus on the content. - āŒ **Presentation Effects:** A few reviewers noted that PowerPoint presentation effects, such as text jumping, were distracting and suggested avoiding such techniques. - āŒ **Language Barriers:** A couple of reviews mentioned issues with English pronunciation, which made it harder for some users to grasp the content fully. - āŒ **Course Price vs. Content Ratio:** There was a mention that at full price, the course might not provide as much value as other resources like Mozilla docs. - āŒ **Exercise Design:** Some exercises were deemed either too basic or too advanced, with suggestions for a better balance and clearer distinction between guide exercises and those meant to challenge users further. **Additional Notes:** - āž”ļø The course is unique in its approach; it's not a classic course as described by the author, so potential students should be aware of this before enrolling. - āž”ļø Some users suggested that complex concepts could be better presented in appendices for optional in-depth exploration. - āž”ļø A request for video explanations of exercise solutions was made to enhance the learning experience and potentially increase the course's rating. **Final Verdict:** This SVG Fundamentals course is a highly recommended introduction to SVG, with a powerful theoretical part and practical exercises to consolidate knowledge through coding. Despite some criticisms regarding distractions like background music and presentation effects, as well as language barriers and the level of math content, the course stands out for its quality content and focus on learning rather than just quantity. With a few improvements, such as better exercise design and optional in-depth explanations, this course could be elevated even further. Overall, it's a valuable resource for anyone looking to understand or deepen their knowledge of SVGs, with a well-deserved 4.30 rating based on recent reviews.

Charts

Price

SVG Fundamental - Price chart

Rating

SVG Fundamental - Ratings chart

Enrollment distribution

SVG Fundamental - Distribution chart

Related Topics

2597748
udemy ID
10/8/2019
course created date
10/22/2019
course indexed date
Bot
course submited by