Udemy

SVG Fundamental

Enroll Now
  • 2,445 Students
  • Updated 8/2024
4.3
(170 Ratings)
CTgoodjobs selects quality courses to enhance professionals' competitiveness. By purchasing courses through links on our site, we may receive an affiliate commission.

Course Information

Registration period
Year-round Recruitment
Course Level
Study Mode
Duration
4 Hour(s) 48 Minute(s)
Language
English
Taught by
Alexandr Tyurin
Rating
4.3
(170 Ratings)

Course Overview

SVG Fundamental

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

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!

Course Content

  • 9 section(s)
  • 61 lecture(s)
  • Section 1 The simplest concepts: сoordinate system, <svg> container element, basic shapes
  • Section 2 <path> element [purpose, application]. C.P. concept. “d” property [Path data]
  • Section 3 Styling. Presentation attributes & geometry properties. CSS rules specificity
  • Section 4 The concept of viewport in SVG, viewBox and its parameters [x, y, width, height]
  • Section 5 Document structure [Types of elements, Grouping (<g> element), Reusable content]
  • Section 6 Painting
  • Section 7 Paint servers [gradients & patterns]
  • Section 8 SVG Animations
  • Section 9 Bonus section

What You’ll Learn

  • EDUCATIONAL ROUTE [from simple to complex (inductive method of cognition)]:
  • 1. The simplest concepts [coordinate system features in 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 [, , , , , ]
  • 4. Element 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: attribute [ & parameters]
  • 15. Nested viewport [units, percentage calculation algorithm]
  • 16. Document structure [SVG fragment, types of elements], Grouping [ element and its properties], Reusable content [, , element and their application features]
  • 17. Painting [types of graphic elements, & attributes, different ways of painting, values, SVG color units]
  • 18. Fill properties [color control flexibility in fill methods, fill algorithm in case of value fill-rule property: , fill algorithm in case of value fill-rule property: , 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), 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!


Reviews

  • T
    Tim Kraut
    5.0

    It took me a while to understand what is meant by "do your homework" and how I can find the assigned lessons. Besides that, this course is a hidden gem! Really concise and well structured. I love it!

  • J
    José Delgado
    1.0

    Hi Everyone. I was thrilled to learn SVG stuff. I thought I was in the right place because this course's content seemed to fit pretty well for me. Nonetheless, the teacher was excellent. Reading this course's reviews I noticed that those reviews were written prematurely, because as the teacher always says: "Do your homework..." I was doing my homework, and I usually try to do it by myself with no opening answers file until I spent 4 hours of my life reading and rereading chapter Section 4 Lecture 3 with the exercise [viewBox & transformations]\module 2 S4L3 Homework [Exercise 2] that has more mistakes than my marriage life. 1. bound_layers id doesn't exist in the file to practice and the instructions file mentioned that's critical if you're new in this SVG world, you would likely want to throw away the course. 2. The final transform should be "translated (-100,-150) scale(.5)" although this isn't clear in the instructions document because the author set scale(.5) translate(-100,-150) in the text as he mentioned the order and set the correct order in the images column of the article so that's pretty confusing. It is even worse if you're learning English because this section makes you question your abilities. After all, the author didn’t take enough time to double-check the homework files.

  • F
    Fred Dukker
    5.0

    Great quality course about the fundamentals SVG. The working of SVG elements and attributes are explained in depth. I really liked the way how the teacher provide the theorie in a condensed but very thoughtful manner. A lot of exercises to practice the theorie. I think the course can become even better if there were also video's that explain the solution. For me this is without any doubt a 5 star course. There is really a focus on quality and not on quantity which I see unfortunately often in other Udemy courses.

  • F
    Fernando Borges
    4.5

    The course gave me the knowledge I needed to start understanding SVG. I just didn't like the music, it makes it difficult for me to concentrate on the subject.

Start FollowingSee all

We use cookies to enhance your experience on our website. Please read and confirm your agreement to our Privacy Policy and Terms and Conditions before continue to browse our website.

Read and Agreed