Course Outline

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

Requirements

  • Background in HTML & CSS
  7 Hours
 

Number of participants


Starts

Ends


Dates are subject to availability and take place between 9:30 am and 4:30 pm.
Open Training Courses require 5+ participants.

Related Courses

Related Categories