Ending In:
Certification Included
access
lifetime
content
5 Hours
Description
SVG stands for Scalable Vector Graphics. SVG programming allows you to code two-dimensional graphics that scale and can be manipulated via CSS, HTML, or JavaScript. This beginner-friendly SVG programming course is great for anyone who wants to design logos and images for websites and enhance their web design capabilities.- Access 55 lectures & 5 hours of content 24/7
- Get an introduction to SVG & understand the syntax
- Deisng basic shapes
- Add text to your SVG
- Explore important elements in SVG
- Use JavaScript in SVG
- Apply filters to images & explore the concept of gradients in SVG
- Understand animation & design logos and complex animation
Instructor
Kunal Asudani is a website developer with 8 years of experience in web development and as an instructor. He has an expertise in programming languages such as HTML, JSON, JavaScript, jQuery, CSS, Twitter Bootstrap, AngularJS, Foundation, C, C++, PHP, and DSA.Important Details
- Length of time users can access this course: lifetime
- Access options: web streaming, mobile streaming
- Certification of completion included
- Redemption deadline: redeem your code within 30 days of purchase
- Experience level required: all levels
Requirements
- Internet required
Terms
- Unredeemed licenses can be returned for store credit within 15 days of purchase. Once your license is redeemed, all sales are final.
Course Outline
- Introduction to the Course , Instructor and Understanding Syntax.
- Introduction to SVG. - 5:38
- Introduction to instructor. - 1:01
- The first SVG example. - 7:10
- BASIC SHAPE - Designing of RECTANGLE.
- Designing a Basic Rectangle. - 6:23
- Adding concept of TRANSPARENCY to the Rectangle. - 6:43
- The advance TRANSPARENCY concept. - 4:10
- Adding Rounded Corners to a Rectangle. - 5:10
- BASIC SHAPE - Designing of CIRCLE.
- Designing CIRCLE in SVG. - 5:37
- BASIC SHAPE - Designing of ELLIPSE.
- Designing a Basic ellipse. - 5:45
- Designing Multiple Ellipse in SVG. - 7:04
- Designing the combination of two ellipse. - 5:03
- BASIC SHAPE - Designing of LINE.
- Designing LINE in SVG. - 4:40
- BASIC SHAPE - Designing of POLYGON.
- Designing a Basic POLYGON. - 6:29
- Designing POLYGON with FOUR sides. - 6:07
- ADVANCE use of POLYGON. - 9:08
- ADVANCE use of POLYGON - Part 2. - 3:54
- BASIC SHAPE - Designing of POLYLINE.
- Designing a Basic POLYLINE. - 6:06
- Combination of Different straight Lines. - 4:02
- Understanding the concept of PATH in SVG.
- Basics and Practical example of PATH. - 6:44
- Designing a Quadratic Curve using the PATH concept. - 19:48
- Adding TEXT to your SVG.
- Defining a basic TEXT in SVG. - 2:45
- Rotating the TEXT at a certain angle. - 3:40
- Adding some advance Functionality to TEXT. - 5:41
- Using TEXT as a link in SVG. - 6:52
- Useful ELEMENTS in SVG.
- The use of g element in SVG. - 7:29
- The use of defs element in SVG. - 6:40
- The use of symbol element in SVG. - 4:56
- STROKES in SVG.
- Introduction to stroke with practical example. - 4:37
- The use of stroke-width property in SVG. - 3:33
- The stroke dasharray concept. - 5:39
- The stroke linecap property in SVG. - 4:55
- Some ADVANCE concept used in SVG.
- The Clip path concept in SVG. - 5:34
- Use of mask in SVG. - 11:03
- Introduction to TOOLS for SVG. - 4:11
- Adding JAVASCRIPT to SVG.
- Using script in SVG. - 10:56
- Adding more than one event to SVG. - 7:23
- Applying different EFFECTS / FILTERS to SVG.
- Applying BLUR effect. - 8:12
- Implementing the SHADOW effect. - 10:00
- Using BLUR effect for an OFFSET image. - 5:44
- Applying black shadow to an element. - 2:58
- Applying Colored shadow. - 4:29
- Applying GRADIENTS in SVG.
- Understanding the concept of gradient. - 9:54
- Understanding the vertical linear gradient . - 3:00
- Adding Text to Linear gradient. - 3:39
- The concept of Radial Gradient in SVG. - 8:43
- Performing Animation in SVG.
- The basic implementation of animation. - 7:51
- The advance function of animation. - 10:04
- Applying animation to multiple objects. - 8:50
- The use of END element in SVG. - 6:21
- Performing repeated actions in Animation. - 10:34
- The use of SET element in SVG. - 9:43
- Understanding the transform animation. - 6:43
- Animating the MOTION of element. - 5:21
- Animating Motion of an element -Part2 - 6:22
- Adding Links to Images. - 3:28
access
lifetime
content
5 Hours
