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.8 sections • 18 lectures • 4 hours 25 mins
-
Welcome3 lectures 51:00 Mins
-
Introduction01:00 Mins
-
Setting up our app10:00 Mins
-
SVG rendering fundamentals40:00 Mins
-
-
Building interactive charts in SVG5 lectures 1 Hour
-
Bar chart15:00 Mins
-
Line chart10:00 Mins
-
Scatter-point chart10:00 Mins
-
Pie chart10:00 Mins
-
Pannable chart15:00 Mins
-
-
Interactive graphics with SVG1 lectures 30:00 Mins
-
Creating a widget rendered purely in SVG30:00 Mins
-
-
SVG animation2 lectures 35:00 Mins
-
CSS animation15:00 Mins
-
SMIL animation20:00 Mins
-
-
SVG optimisation3 lectures 37:00 Mins
-
The <use /> element20:00 Mins
-
Cleaning up SVGs exported from design tools12:00 Mins
-
Using SVG optimisers05:00 Mins
-
-
Advanced Effects in SVG1 lectures 25:00 Mins
-
Exploring SVG filter primitives25:00 Mins
-
-
Using SVG with Adobe Illustrator2 lectures 25:00 Mins
-
Exporting SVG graphics from Illustrator10:00 Mins
-
Importing generated SVG with Javascript into Illustrator15:00 Mins
-
-
Conclusion1 lectures 02:00 Mins
-
Conclusion02:00 Mins
-
