New season, New skills! All Courses at $9.99

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
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
  • Lesson 1
    Welcome
    • Introduction
    • Setting up our app
    • SVG rendering fundamentals
  • Lesson 2
    Building interactive charts in SVG
    • Bar chart
    • Line chart
    • Scatter-point chart
    • Pie chart
    • Pannable chart
  • Lesson 3
    Interactive graphics with SVG
    • Creating a widget rendered purely in SVG
  • Lesson 4
    SVG animation
    • CSS animation
    • SMIL animation
  • Lesson 5
    SVG optimisation
    • The <use /> element
    • Cleaning up SVGs exported from design tools
  • Lesson 6
    Advanced Effects in SVG
    • Exploring SVG filter primitives
  • Lesson 7
    Using SVG with Adobe Illustrator
    • Exporting SVG graphics from Illustrator
    • Importing generated SVG with Javascript into Illustrator
  • Lesson 8
    Conclusion
    • Conclusion

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

  • English
  • English, Spanish, French, Japanese, Italian, Portuguese (Machine translation)
  • Beginner & Intermediate
  • Access on mobile and Desktop
  • Full time access
  • Certificate of completion

If you have any questions about this course, please contact us

Start the course and upskill your professional toolkit.

Related courses

Find more courses
like this one.

Currently we have more courses for you View All Courses