Please ensure Javascript is enabled for purposes of website accessibility

About This Course

Gain hands-on experience with coding real projects! Make vector graphics by coding in this awesome course for beginners.

Scalable 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.

Why use SVG?

  • It has good support among all modern browsers, and it’s an open standard.
  • It uses smaller file sizes compared to bitmapped files.
  • You can style shapes in CSS and interact with them in JavaScript! Thus, you can programmatically alter shapes for use on web pages.

What will I learn?

  • Recognize why you should use SVGs for web development.
  • Create SVG shapes.
  • Embed SVG on a web page.
  • Make a landscape scene entirely with code!

What are the requirements?

  • Basic understanding of HTML, CSS, and JavaScript is highly helpful.
  • An Internet connection to follow along in the free text editor JS Bin.
  • No SVG knowledge is required.

Who is the target audience?

  • Anyone who wants to make art for web pages using code!


Our Promise to You

By the end of this course, you will have learned how to create an SVG scene for web animation.

30 Day Money Back Guarantee. If you are unsatisfied for any reason, simply contact us and we’ll give you a full refund. No questions asked.

Get started today and learn more about creating web animation with the use of SVG.

Course Curriculum

Section 1 - Introduction
Introduction 00:00:00
Introduction (Cont’d) 00:00:00
Creating Rectangle And Circles 00:00:00
Creating Lines 00:00:00
SVG viewBox 00:00:00
Polygon Element Part 1 00:00:00
Polygon Element Part 2 00:00:00
Polygon Element Part 3 00:00:00
Polygon Element Part 4 00:00:00
ViewBox Attributes 00:00:00
ViewBox Attributes (Cont’d) 00:00:00
Path Elements 00:00:00
Path Elements (Cont’d) 00:00:00
Bezier Curves Part 1 00:00:00
Bezier Curves Part 2 00:00:00
Bezier Curves Part 3 00:00:00
Bezier Curves Part 4 00:00:00
Quadratic Bezier Curves 00:00:00
Arcs 00:00:00
Arcs (Cont’d) 00:00:00
SVG-Edit And Illustrator 00:00:00
Styling Inline 00:00:00
SVG In IMG Tag 00:00:00
SVG In Background IMG 00:00:00
Modifying Inline SVG 00:00:00
SVG With Javascript 00:00:00
Adding Trees 00:00:00
Creating Trees 00:00:00
Creating Trees (Cont’d) 00:00:00
Remove 00:00:00
Adding Other Type Of Trees 00:00:00
Sorting Trees 00:00:00
Sorting Trees (Cont’d) 00:00:00
Refactoring Javascript 00:00:00
Refactoring Javascript (Cont’d) 00:00:00
Saving As SVG 00:00:00
Saving As SVG (Cont’d) 00:00:00
Save As PNG 00:00:00
Downloading 00:00:00
Refactoring Part 1 00:00:00
Refactoring Part 2 00:00:00
Refactoring Part 3 00:00:00
Main Functionality 00:00:00
Main Functionality (Cont’d) 00:00:00
Testing Cross Browser Compatibility 00:00:00
Checking DOMcontentload 00:00:00
Styling Part 1 00:00:00
Styling Part 2 00:00:00
Styling Part 3 00:00:00
Modal For PNG Part 1 00:00:00
Modal For PNG Part 2 00:00:00
Modal For PNG Part 3 00:00:00
More Javascript Refactoring 00:00:00
Styling The Modal Some More 00:00:00
Adding Size Reset Button 00:00:00
Outro 00:00:00
Source Code 00:00:00
Template Design © VibeThemes. All rights reserved.

Setup Menus in Admin Panel