Download appDownload App

Make Art by Coding: Create an SVG Scene for Web Animation

Gain hands-on experience with coding real projects! Make vector graphics by coding in this awesome course for beginners. Scaleable Vector Graphics (SVG) is an image format that uses vectors, in contra...

  • All levels
  • English

Course Description

Gain hands-on experience with coding real projects! Make vector graphics by coding in this awesome course for beginners. Scaleable Vector Graphics (SVG) is an image format that uses vectors, in contrast to other image formats like jpg, gif, or pngs, which are raster graphics. SVG is made with math. For this reason, it can scale indefinitely! This makes it great for making logos, icons, and simple...

Gain hands-on experience with coding real projects! Make vector graphics by coding in this awesome course for beginners. Scaleable Vector Graphics (SVG) is an image format that uses vectors, in contrast to other image formats like jpg, gif, or pngs, which are raster graphics. SVG is made with math. For this reason, it can scale indefinitely! This makes it great for making logos, icons, and simple designs.

What you’ll learn
  • It has good support among all modern browsers, and it's an open standard.
  • It uses smaller file sizes compared to bitmapped files.

Covering Topics

1
Section 1 : Introduction

Curriculum

      Section 1 : Introduction
1
Introduction Preview
2
Introduction (contd)
3
Creating Rectangle and Circles
4
Creating Lines
5
SVG viewBox Preview
6
Polygon Element Part 1
7
Polygon Element Part 2
8
Polygon Element Part 3
9
Polygon Element Part 4
10
viewBox Attributes Preview
11
viewBox Attributes (Contd)
12
Path Elements
13
Path Elements (Contd)
14
Bezier Curves Part 1 Preview
15
Bezier Curves Part 2
16
Bezier Curves Part 3
17
Bezier Curves Part 4
18
Quadratic Bezier Curves
19
Arcs
20
Arcs (Contd)
21
SVG-edit and Illustrator
22
Styling Inline SVG.mov
23
SVG in IMG tag
24
SVG in Background IMG
25
Modifying Inline SVG
26
SVG with Javascript
27
Adding Trees
28
Creating Trees
29
Creating Trees (Contd)
30
Remove Button.mov
31
Adding other Type of Trees
32
Sorting Trees
33
Sorting Trees (Contd)
34
Refactoring Javascript
35
Refactoring Javascript (Contd)
36
Saving as SVG
37
Saving as SVG (Contd)
38
Save as PNG
39
Downloading Images.mov
40
Refactoring Part 1
41
Refactoring Part 2
42
Refactoring Part 3
43
Main Functionality
44
Main Functionality (Contd)
45
Testing Cross Browser Compatibility
46
Checking DOMcontentload
47
Styling Part 1
48
Styling Part 2
49
Styling Part 3
50
Modal for PNG Part 1
51
Modal for PNG Part 2
52
Modal for PNG Part 3
53
More Javascript Refactoring
54
Styling the Modal Some More
55
Adding Size Reset Button
56
Outro

Frequently Asked Questions

It is an online tutorial that covers a specific part of a topic in several sections. An Expert teaches the students with theoretical knowledge as well as with practical examples which makes it easy for students to understand.

A Course helps the user understand a specific part of a concept. While a path and E-Degrees are broader aspects and help the user understand more than just a small area of the concept.

A Course will help you understand any particular topic. For instance, if you are a beginner and want to learn about the basics of any topic in a fluent manner within a short period of time, a Course would be best for you to choose.

We have an inbuilt question-answer system to help you with your queries. Our support staff will be answering all your questions regarding the content of the Course.