SVG Fundamental
SVG Fundamental, available at $74.99, has an average rating of 4.5, with 61 lectures, based on 161 reviews, and has 2402 subscribers.
You will learn about 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! This course is ideal for individuals who are Target students: Web Researchers It is particularly useful for Target students: Web Researchers.
Enroll now: SVG Fundamental
Summary
Title: SVG Fundamental
Price: $74.99
Average Rating: 4.5
Number of Lectures: 61
Number of Published Lectures: 61
Number of Curriculum Items: 61
Number of Published Curriculum Objects: 61
Original Price: $199.99
Quality Status: approved
Status: Live
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!
Who Should Attend
- Target students: Web Researchers
Target Audiences
- Target students: Web Researchers
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 Curriculum
Chapter 1: The simplest concepts: сoordinate system, <svg> container element, basic shapes
Lecture 1: C.S features <svg>element [first simplified approach to the concept of viewport]
Lecture 2: Types & Application of Basic Shapes. <rect> geometry [x,y,width,height,rx,ry]
Lecture 3: <circle> <ellipse> <line> elements and its geometric properties
Lecture 4: <polyline> [points = “x1,y1, … xn,yn”] <polygon> [points = “x1,y1, … xn,yn”]
Chapter 2: <path> element [purpose, application]. C.P. concept. “d” property [Path data]
Lecture 1: Path data[syntax]. C.P. concept. moveTo(M,m) lineTo(L,l) closePath(Z,z) commands
Lecture 2: The cubic Bézier curve, Smooth cubic poly Bezier curve and its geometry
Lecture 3: Quadratic Bezier Curve, Smooth Quadratic poly Bezier and its geometry
Lecture 4: elliptical arc curve [Rx, Ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y]
Chapter 3: Styling. Presentation attributes & geometry properties. CSS rules specificity
Lecture 1: Options for changing styles of SVG graphic elements
Lecture 2: The CSS rules specificity. Specificity calculation. Priority of applied styles
Lecture 3: Geometry properties & Presentation attributes. Using. Limitations
Lecture 4: G.P in-depth [Part1]. rx and ry in detail. rx, ry calculation algorithm
Lecture 5: G.P in-depth [Part2]. Algorithm of the rectangle with the rounded corners
Lecture 6: G.P in-depth [Part3]. Algorithm of the ellipse rendering
Chapter 4: The concept of viewport in SVG, viewBox and its parameters [x, y, width, height]
Lecture 1: The concept of viewport & viewBox in SVG. Initial & Local coordinate systems
Lecture 2: The relationship of viewport and viewBox in SVG
Lecture 3: Your help is needed here!
Lecture 4: The viewBox and transformations
Lecture 5: The preserveAspectRatio attribute
Lecture 6: Establishing a new SVG viewport [nested viewport, units]
Chapter 5: Document structure [Types of elements, Grouping (<g> element), Reusable content]
Lecture 1: SVG fragment, types of elements
Lecture 2: Grouping. Element <g>. Properties of <g> element as a container element
Lecture 3: Reusable content [<defs> <use> <symbol> elements]
Lecture 4: Application features of the <use> element
Chapter 6: Painting
Lecture 1: The paint operations. <paint> values. SVG color units
Lecture 2: Fill properties
Lecture 3: Stroke properties [stroke, stroke-width, stroke-opacity, paint order]
Lecture 4: Stroke properties: stroke-linecup, stroke-linejoin
Lecture 5: Stroke properties [stroke-dasharray & stroke-dashoffset]
Lecture 6: Markers
Lecture 7: Bounding box
Chapter 7: Paint servers [gradients & patterns]
Lecture 1: Paint Servers
Lecture 2: Gradients [types, vector, normal, color stops, color transitions]
Lecture 3: linear Gradient: the vector attributes [x1,x2,x3,x4]
Lecture 4: linear Gradient other Attributes[gradientUnits, gradientTransform, spreadMethod]
Lecture 5: Radial gradient [vector, inner & outer circumference,- stop color]
Lecture 6: patterns [tile concept, types, attributes]
Chapter 8: SVG Animations
Lecture 1: Information
Lecture 2: SVG's animation elements (Part1)
Lecture 3: SVG's animation elements (Part2)
Lecture 4: Attributes to identify the target element for an animation & control the timing
Lecture 5: Attributes to control animation over time
Lecture 6: Attributes to control additivity, Morphing example & Clock values
Lecture 7: SVG elements, attributes, properties and data types that can be animated
Lecture 8: Interactivity features in SVG
Chapter 9: Bonus section
Lecture 1: Information
Lecture 2: Interactive Web Animation. Demo lesson [part 1]
Lecture 3: Interactive Web Animation. Demo lesson [part 2]
Lecture 4: Interactive Web Animation. Demo lesson [part 3]
Lecture 5: Creative Web Animation with GSAP 3. Demo lesson
Lecture 6: Staggered animations [configuration objects]
Lecture 7: ScrollTrigger [Part1]
Lecture 8: ScrollTrigger [Part2]
Lecture 9: ScrollTrigger [Part3]
Lecture 10: ScrollTrigger [Part3]
Lecture 11: Advanced Web Animation with Canvas. Demo lesson [part 1]
Lecture 12: Advanced Web Animation with Canvas. Demo lesson [part 2]
Lecture 13: Advanced Web Animation with Canvas. Demo lesson [part 3]
Lecture 14: Advanced Web Animation with Canvas. Demo lesson [part 4]
Lecture 15: Advanced Web Animation with Canvas. Demo lesson [part 5]
Lecture 16: What's next?
Instructors
-
Alexandr Tyurin
Software engineer
Rating Distribution
- 1 stars: 4 votes
- 2 stars: 10 votes
- 3 stars: 17 votes
- 4 stars: 37 votes
- 5 stars: 93 votes
Frequently Asked Questions
How long do I have access to the course materials?
You can view and review the lecture materials indefinitely, like an on-demand channel.
Can I take my courses with me wherever I go?
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!
You may also like
- Digital Marketing Foundation Course
- Google Shopping Ads Digital Marketing Course
- Multi Cloud Infrastructure for beginners
- Master Lead Generation: Grow Subscribers & Sales with Popups
- Complete Copywriting System : write to sell with ease
- Product Positioning Masterclass: Unlock Market Traction
- How to Promote Your Webinar and Get More Attendees?
- Digital Marketing Courses
- Create music with Artificial Intelligence in this new market
- Create CONVERTING UGC Content So Brands Will Pay You More
- Podcast: The top 8 ways to monetize by Podcasting
- TikTok Marketing Mastery: Learn to Grow & Go Viral
- Free Digital Marketing Basics Course in Hindi
- MailChimp Free Mailing Lists: MailChimp Email Marketing
- Automate Digital Marketing & Social Media with Generative AI
- Google Ads MasterClass – All Advanced Features
- Online Course Creator: Create & Sell Online Courses Today!
- Introduction to SEO – Basic Principles of SEO
- Affiliate Marketing For Beginners: Go From Novice To Pro
- Effective Website Planning Made Simple