Get a 50% discount when you buy 2 courses or more!
NEW Pre order Building vector graphics, UIs and animations with SVG from scratch By Georgi Nikoloff
Building vector graphics, UIs and animations with SVG from scratch
English English, Spanish, French (+3) [Machine translation]
4 Hours 25 Mins Course

Building vector graphics, UIs and animations with SVG from scratch

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.

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.

Pre-order. This special price is available as you are buying the course in advance. The course will be available by the end of September. The price will increase as we get closer to the date and once it’s online it will be full price - so register now for a big discount.

(*) The times of the chapters as well as the total duration of the course are approximate and may have some variation

The subtitles are automatically generated, so the quality of the captions may vary.
Course Table of contents
What will you learn?

8 sections • 18 lectures • 4 hours 25 mins

  • Welcome
    3 lectures 51:00 Mins
    • Introduction
      01:00 Mins
    • Setting up our app
      10:00 Mins
    • SVG rendering fundamentals
      40:00 Mins
  • Building interactive charts in SVG
    5 lectures 1 Hour
    • Bar chart
      15:00 Mins
    • Line chart
      10:00 Mins
    • Scatter-point chart
      10:00 Mins
    • Pie chart
      10:00 Mins
    • Pannable chart
      15:00 Mins
  • Interactive graphics with SVG
    1 lectures 30:00 Mins
    • Creating a widget rendered purely in SVG
      30:00 Mins
  • SVG animation
    2 lectures 35:00 Mins
    • CSS animation
      15:00 Mins
    • SMIL animation
      20:00 Mins
  • SVG optimisation
    3 lectures 37:00 Mins
    • The <use /> element
      20:00 Mins
    • Cleaning up SVGs exported from design tools
      12:00 Mins
    • Using SVG optimisers
      05:00 Mins
  • Advanced Effects in SVG
    1 lectures 25:00 Mins
    • Exploring SVG filter primitives
      25:00 Mins
  • Using SVG with Adobe Illustrator
    2 lectures 25:00 Mins
    • Exporting SVG graphics from Illustrator
      10:00 Mins
    • Importing generated SVG with Javascript into Illustrator
      15:00 Mins
  • Conclusion
    1 lectures 02:00 Mins
    • Conclusion
      02:00 Mins

Georgi is an exceptional programmer. He lives and breathes computer graphics, animation and building awesome things. When not on the lookout for the next amazing technology he loves to help others to excel and take you with you into the rabbit hole of creating graphics and animations from the ground up.
Matthias Wolff
Matthias Wolff Co-Founder &amp; COO at Xymatic
Course details

Building vector graphics, UIs and animations with SVG from scratch

Building vector graphics, UIs and animations with SVG from scratch

By Georgi Nikoloff

  • English
  • English, Spanish, French, Japanese, Italian, Portuguese (Machine translation)
  • Beginner & Intermediate
  • Access on mobile and Desktop
  • Full time access
  • Certificate of completion
About the Speaker
Learn from the best
  • Georgi Nikoloff

    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.

Similar Courses