Mastering Web Animations Using SVG

Mastering Web Animations Using SVG

English | MP4 | AVC 1920×1080 | AAC 48KHz 2ch | 3h 02m | 607 MB

Learn the latest ways of designing the internet and mobile devices

With the increasing demand for responsive and interactive interfaces from web users, the animation plays a crucial role. SVG is changing the way we design the user experience for the web. SVG is lightweight, can be used with CSS and JavaScript, has XML functionality and makes the most beautiful designs and even small interactive games. This leading language encompasses XML, JavaScript PHP among others all-in-one shell. The potential with SVG is galore and we have just begun.

This course offers a strong foundation within the SVG world, showcasing its unique potential. You will learn many cool techniques of web animations. Web animation is a fairly tricky subject; however, we offer to help you understand and explore its potential in a simple and easy manner. We start with showcasing the basic structures of using an SVG within an HTML and CSS environment and continue to explore the possibilities of the robust language.

By the end of the course, you will be able to customize animations for your web applications using different methods. This course will give you an in-depth understanding of SVG. We have made it a point that you have all the tools required for your exploration of any SVG project.

This course is faced paced yet with simple clear solutions. As the SVG world is quite big and filled with possibilities, we will provide the necessary knowledge so that you do not need to take another course

What You Will Learn

  • Design basic SVG’s in Adobe Illustrator
  • Use SVG’s online and on mobile devices
  • Manipulate SVG’s with CSS2/3
  • Animate SVG using its own language
  • Incorporate XML functionality
  • Target SVG within a DOM structure
  • Explore important code libraries and further animate with JavaScript
Table of Contents

SVG Drawing
1 Course Overview
2 Creating Basic SVG Using Adobe Illustrator
3 Exploring Design Possibilities
4 Viewing the SVG Code
5 Style Your SVG Using CSS
6 Embedding Your SVG Design Within an HTML Container
7 SVG Projects

SVG Animations
8 SMIL Animations
9 CSS Animation Properties
10 Making SVG Responsive
11 How to Incorporate XML Attributes and Linking
12 Simple Tips and Tricks to Structure Your File

SVG Functionality
13 JavaScript and Your SVG
14 Interacting with JavaScript
15 SVG Shape Morphs
16 Custom JavaScript Libraries
17 Creative Summary
18 D3 – Data Driven Documents