Building vector graphics, UIs and animations with SVG from scratch

Name: Building vector graphics, UIs and animations with SVG from scratch
Author: Georgi Nikoloff

By Georgi Nikoloff

Language: English
Certificate: of completion
Subtitles: English, Spanish, French, Japanese, Italian, Portuguese (Machine translation)
Duration: 9 Hours 12 Mins

Now

9.99$

/$100

While SVG is simple and intuitive, it has a lot to offer in terms of building complex interactive graphics, animations and special effects. With a little bit of math and good understanding of the API, you will be able to fully express your creative ideas and build advanced data charts, widgets and animated scenes, without having to rely on code and libraries that other people wrote.

Category	Course format	Language	Duration	Level
Animation, SVG	Online	English with Subt.	9 Hours 12 Mins	Beginner & Intermediate

After you watch this course, you will gain deep knowledge not only on all the shapes, animations and advanced filter effects that SVG provides, but on optimising, removing redundant markup and reducing your file sizes.

Once done, you will be able to export, optimise and animate SVG graphics generated in softwares like Figma and Adobe Illustrator. Furthermore, you will be able to programatically generate SVG graphics with Javascript and import them in a design software, so you can create truly random, programmatic pieces of vector art.

Modules

What you will learn
in this course.

Lessons

Chapters

Duration
Lesson 1

Welcome

3

2 Hours 7 Mins

View more
- Introduction
  
  00:40 Mins
- Setting up our app
  
  17:48 Mins
- SVG rendering fundamentals
  
  1 Hour 49 Mins
Lesson 2

Building interactive charts in SVG

5

3 Hours 24 Mins

View more
- Bar chart
  
  1 Hour 7 Mins
- Line chart
  
  51:48 Mins
- Scatter-point chart
  
  39:23 Mins
- Pie chart
  
  28:37 Mins
- Pannable chart
  
  19:42 Mins
Lesson 3

Interactive graphics with SVG

1

32:28 Mins

View more
- Creating a widget rendered purely in SVG
  
  32:28 Mins
Lesson 4

SVG animation

2

1 Hour 15 Mins

View more
- CSS animation
  
  41:33 Mins
- SMIL animation
  
  34:06 Mins
Lesson 5

SVG optimisation

2

36:47 Mins

View more
- The <use /> element
  
  25:50 Mins
- Cleaning up SVGs exported from design tools
  
  10:57 Mins
Lesson 6

Advanced Effects in SVG

1

34:40 Mins

View more
- Exploring SVG filter primitives
  
  34:40 Mins
Lesson 7

Using SVG with Adobe Illustrator

2

41:04 Mins

View more
- Exporting SVG graphics from Illustrator
  
  18:24 Mins
- Importing generated SVG with Javascript into Illustrator
  
  22:40 Mins
Lesson 8

Conclusion

1

00:59 Mins

View more
- Conclusion
  
  00:59 Mins

Meet the teacher

Georgi Nikoloff

Frontend & Creative Developer

I am a frontend developer living and working in Berlin. I specialize in developing rich user interfaces and graphics, such as websites, web apps, animations and visualizations.

Now

9.99$

/$100

Course Content

While SVG is simple and intuitive, it has a lot to offer in terms of building complex interactive graphics, animations and special effects. With a little bit of math and good understanding of the API, you will be able to fully express your creative ideas and build advanced data charts, widgets and animated scenes, without having to rely on code and libraries that other people wrote.

Features