Course Code: svg
Duration: 7 hours
Prerequisites:
  • Background in HTML & CSS
Overview:

Scalable Vector Graphics (SVG) is an XML-based graphics format used to create 2D vector images.

In this instructor-led, live training, participants will learn the fundamentals of SVG as they step through the creation of their first SVG project.

By the end of this training, participants will be able to:

  • Understand the basics of vector graphics and SVG
  • Learn how to create, modify, use, and optimize SVG
  • Learn how to use SVG with HTML & CSS
  • Learn how to do basic animations with SVG
  • Create their own SVG animation

Audience

  • Developers and Programmers
  • Graphic Designers
  • HTML & CSS developers interested in learning more about SVG

Format of the course

  • Part lecture, part discussion, exercises and heavy hands-on practice
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

Sites Published:

United Arab Emirates - SVG Fundamentals

Qatar - SVG Fundamentals

Egypt - SVG Fundamentals

Saudi Arabia - SVG Fundamentals

South Africa - SVG Fundamentals

Brasil - SVG Fundamentals

Canada - SVG Fundamentals

中国 - SVG Fundamentals

香港 - SVG Fundamentals

澳門 - SVG Fundamentals

台灣 - SVG Fundamentals

USA - SVG Fundamentals

Österreich - SVG Fundamentals

Schweiz - SVG Fundamentals

Deutschland - SVG Fundamentals

Czech Republic - SVG Fundamentals

Denmark - SVG Fundamentals

Estonia - SVG Fundamentals

Finland - SVG Fundamentals

Greece - SVG Fundamentals

Magyarország - SVG Fundamentals

Ireland - SVG Fundamentals

Luxembourg - SVG Fundamentals

Latvia - SVG Fundamentals

España - Fundamentos de SVG

Italia - SVG Fundamentals

Lithuania - SVG Fundamentals

Nederland - SVG Fundamentals

Norway - SVG Fundamentals

Portugal - SVG Fundamentals

România - SVG Fundamentals

Sverige - SVG Fundamentals

Türkiye - SVG Fundamentals

Malta - SVG Fundamentals

Belgique - SVG Fundamentals

France - SVG Fundamentals

日本 - SVG Fundamentals

Australia - SVG Fundamentals

Malaysia - SVG Fundamentals

New Zealand - SVG Fundamentals

Philippines - SVG Fundamentals

Singapore - SVG Fundamentals

Thailand - SVG Fundamentals

Vietnam - SVG Fundamentals

India - SVG Fundamentals

Argentina - Fundamentos de SVG

Chile - Fundamentos de SVG

Costa Rica - Fundamentos de SVG

Ecuador - Fundamentos de SVG

Guatemala - Fundamentos de SVG

Colombia - Fundamentos de SVG

México - Fundamentos de SVG

Panama - Fundamentos de SVG

Peru - Fundamentos de SVG

Uruguay - Fundamentos de SVG

Venezuela - Fundamentos de SVG

Polska - SVG Fundamentals

United Kingdom - SVG Fundamentals

South Korea - SVG Fundamentals

Pakistan - SVG Fundamentals

Sri Lanka - SVG Fundamentals

Bulgaria - SVG Fundamentals

Bolivia - Fundamentos de SVG

Indonesia - SVG Fundamentals

Kazakhstan - SVG Fundamentals

Moldova - SVG Fundamentals

Morocco - SVG Fundamentals

Tunisia - SVG Fundamentals

Kuwait - SVG Fundamentals

Oman - SVG Fundamentals

Slovakia - SVG Fundamentals

Kenya - SVG Fundamentals

Nigeria - SVG Fundamentals

Botswana - SVG Fundamentals

Slovenia - SVG Fundamentals

Croatia - SVG Fundamentals

Serbia - SVG Fundamentals

Bhutan - SVG Fundamentals

Nepal - SVG Fundamentals

Uzbekistan - SVG Fundamentals