Building vector graphics, UIs and animations with SVG from scratch
- Language: English
- Certificate: of completion
- Subtitles: English, Spanish, French, Japanese, Italian, Portuguese (Machine translation)
- Duration: 9 Hours 12 Mins
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
-
Lesson 1Welcome
-
Introduction
-
Setting up our app
-
SVG rendering fundamentals
-
-
Lesson 2Building interactive charts in SVG
-
Bar chart
-
Line chart
-
Scatter-point chart
-
Pie chart
-
Pannable chart
-
-
Lesson 3Interactive graphics with SVG
-
Creating a widget rendered purely in SVG
-
-
Lesson 4SVG animation
-
CSS animation
-
SMIL animation
-
-
Lesson 5SVG optimisation
-
The <use /> element
-
Cleaning up SVGs exported from design tools
-
-
Lesson 6Advanced Effects in SVG
-
Exploring SVG filter primitives
-
-
Lesson 7Using SVG with Adobe Illustrator
-
Exporting SVG graphics from Illustrator
-
Importing generated SVG with Javascript into Illustrator
-
-
Lesson 8Conclusion
-
Conclusion
-
Meet the teacher
Georgi Nikoloff
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.
Course Content
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.
Features
- English
- English, Spanish, French, Japanese, Italian, Portuguese (Machine translation)
- Beginner & Intermediate
- Access on mobile and Desktop
- Full time access
- Certificate of completion
-
Georgi Nikoloff
Teacher at awwwards.com
If you have any questions about this course, please contact us
