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

Related Courses

Affinty Photo

  14 hours

Affinity Designer

  14 hours

Fundamentals of Mobile Photography

  7 hours

Adobe Dreamweaver

  28 hours

Adobe Flash Basic

  21 hours

Adobe Acrobat - PDF Creating

  14 hours

Adobe Illustrator

  14 hours

Adobe InDesign

  14 hours

Adobe InDesign Advanced With Interactive Publications

  14 hours

Adobe Premiere Pro

  14 hours

Adobe Captivate

  14 hours

Adobe Technical Communication Suite

  28 hours

Adobe InDesign CS6

  21 hours

Graphic Design Bootcamp

  35 hours