Course Outline


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


Closing Remarks


  • Background in HTML & CSS
 7 Hours

Upcoming Courses