SVG Fundamentals Training Course

Introduction

Overview of Scalable Vector Graphics

• Understanding Vector Graphics
• SVG Fundamentals
• SVG Uses and Applications

Learning the Basics of Using SVG

• Creating an SVG
• Using SVG as Images
• Creating an SVG Image

Digging Deep into SVG Code

• Understanding the SVG Layout, Structure, and Attributes
• Introduction to SVG Elements
• Working with SVG Graphical Elements
• Working with SVG Container Elements
• Working with SVG Gradient Elements

Using SVG with HTML & CSS

• Embedding SVG
• Modifying and Styling SVG Using CSS
• Making SVG Responsive

Creating SVG Sprites

• Overview of Image Sprites
• Using HTML Inline SVG Sprites
• Referencing External SVG Sprites in HTML
• Using CSS Inline SVG Sprites
• Using SVG Fragment Identifiers

Optimizing SVG

Animating with SVG

• Using CSS for SVG Animation
• Using SMIL for SVG Animation
• Using JavaScript for SVG Animation

Creating Your First SVG Logo Animation Project

• Setting Up Your Work Environment
• Drawing the SVG
• Modifying the SVG Code to Style the SVG
• Optimizing the SVG
• Animating the SVG

Troubleshooting

Closing Remarks